Les routes en React

15 Juil Les routes en React

La première étape est de créer un dossier dans notre répertoire src. On le nomme routes.

Dans ce dossier on crée un fichier Routes.js

import React, { Component } from 'react';

/* On importe ici Route , Switch et BrowserRouter */
import { Route, Switch, BrowserRouter } from 'react-router-dom';

/* Liste des components */
import Home from '../components/pages/Home'
import Single from '../components/pages/Single'

class Routes extends Component {
    render() {
        return (
            {/* PARTIE DES ROUTES */}
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/single" component={Single} />
                </Switch>
            </BrowserRouter>
            {/* END PARTIE ROUTE */}
        )
    }
}

export default Routes

Ensuite dans notre fichier App.js on fait un appel du notre fichier Routes.js

import React, { Component } from 'react';

/* On importe notre fichier */
import Routes from './routes/Routes';

class App extends Component {
	render() {
		return (
			<div>
				<Routes /> {/* BALISE DE ROUTES */}
			</div>
		);
	}
}

export default App;

Dernière étape est l’affichage de notre lien

On importe

import { Link } from 'react-router-dom';

Et on affiche le lien dans notre Render

<Link to="/single">Page de test</Link>