React par la pratique – 4: Routage avec React-router 4

composant avec React

Sommaire

Avant de commencer

Comme dans l’article précédent je vous recommande la documentation officielle, il faut faire attention à lire la documentation de la bonne version, React Router n’est pas toujours rétro compatible donc prudence.

Comme dans l’article précédent on va se concentrer sur le minimum nécessaire pour démarrer.

Pourquoi React-router 4

Dans une application SPA on a souvent besoin de gérer le routage dans le navigateur, pour ce faire plusieurs solutions sont possibles, je préconise React-router car c’est la solution la plus simple et complète à mon avis.

Installation

npm i --save react-router react-router-dom

Utilisation basique

Avant de commencer on a besoin de pages, on va donc commencer par créer deux composants simples chaqu’un pour une page donnée:

Page 1 : home page

// src/pages/Home.jsx

import React from 'react'

export default function Home() {
    return (
        <div>
            <h1>Home page</h1>
        </div>
    )
}

Page 2 : About us

// src/pages/About.jsx

import React from 'react'

export default function About() {
    return (
        <div>
            <h1>About us page</h1>
        </div>
    )
}

après cela il faut configurer un Router, ça sera le nouveau point d’entrée de notre application, et c’est lui qui va décider quel composant afficher en fonction de l’URL de la page :

// src/routes.jsx

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Home from './pages/Home'
import About from './pages/About'

export default function MainRouter () {
    return (
        <Router>
            <div>
                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
            </div>
        </Router>
    )
}

On termine par monter le router directement dans notre page pour qu’il devienne notre point d’entrée :

import React from 'react';
import { render } from 'react-dom';

import MainRouter from './routes'

render( <MainRouter />, document.getElementById('react-app'))

c’est toutes la configuration dont vous avez besoin, vous pouvez tester sur votre navigateur en utilisant les URLs correspondantes aux pages :

Homepage : http://localhost:9090

About : http://localhost:9090/about

Code source

Le code source est disponible sur github au tag suivant Step-3 pour pointer directement sur cette étape.

pour rappel, voici la commande pour choisir un tag avec git :

git checkout Step-3

Suite

Dans le prochain article on va voir comment gérer la problématique des Layouts avec React Router 4.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *