Documentation et ressources

• Site officiel : https://reactrouter.com/
• Documentation v5 : https://v5.reactrouter.com/web/guides/quick-start

React Router 5

Utilisation de base

npm install react-router-dom@5

import {Link, BrowserRouter, Route} from 'react-router-dom';

// Enveloppez Link et Route avec BrowserRouter ou HashRouter
<BrowserRouter>
    <h1>Démo de routage</h1>
    <Link to="/hello">Vers Hello</Link>
    <br/>
    <Link to="/welcome">Vers Welcome</Link>

    <h1>Enregistrement des routes</h1>
    <Route path="/hello" component={Hello}/>
    <Route path="/welcome" component={Welcome}/>
</BrowserRouter>

• Toutes les routes sont évaluées séquentiellement.
• Si le chemin actuel correspond au path d'un composant Route, le composant associé sera affiché. Toutes les routes correspondantes sont rendues.

NavLink

Similaire à Link, mais lors d'une transition, NavLink reçoit automatiquement une classe CSS (par défaut active).

Utilisez l'attribut activeClassName pour personnaliser le nom de la classe lorsque le lien est actif.

Composants de route vs composants génériques

Les composants de route reçoivent des propriétés spécifiques via props :

• history :
  • go(n) : navigue vers une entrée spécifique de l'historique
  • goBack() : retour arrière
  • goForward() : retour avant
  • push(path, state) : ajoute une entrée dans la pile
  • replace(path, state) : remplace l'entrée courante dans la pile
  • location : information d'URL
  • action : type d'action (PUSH / REPLACE)
  • block, createHref, length
• location :
  • key, hash, pathname, search, state
• match :
  • params : paramètres d'URL
  • path : motif du chemin
  • url : URL réelle
  • isExact : indique si la correspondance est exacte
• staticContext (utilisé pour le rendu côté serveur)

Switch

Si plusieurs routes corespondent simultanément, les composants associés sont tous rendus. Pour n'afficher que la première correspondance, enveloppez les Route avec Switch.

Switch améliore l'efficacité (correspondance unique).

Correspondance felxible vs exacte

Par défaut, la correspondance est flexible (partielle). Pour les chemins à plusieurs segments, React Router découpe l'URL par "/" et teste chaque segment. Si le premier segment correspond, le composant est rendu, et la suite peut être gérée à l'intérieur du composant.

L'attribut exact (exact) force une correspondance stricte : le chemin doit correspondre parfaitement à l'URL.

Redirection

Utilisez Redirect en dernier recours, pour rediriger vers une route par défaut lorsque aucune route ne correspond.

<Redirect to="/default" />

Passage de paramètres lors de la navigation

Par paramètres d'URL (params)

Définissez le motif de la route avec :param :

<Route path="/utilisateur/:id" component={Profil} />

Le paramètre id est accessible via props.match.params.id.

Par query string (search)

Exemple : ?key=value&k2=v2. Les paramètres ne sont pas automatiquement analysés ; vous pouvez utiliser la bibliothèque query-string (souvent importée sous le nom qs).

Par state

Passez un objet state dans la propriété to de Link :

<Link to={{pathname: '/profil', state: {userId: 123}}}>Profil</Link>

Les données sont accessibles via props.location.state.

Push et Replace

Par défaut, la navigation en mode push ajoute une entrée dans l'histoirque, permettant de revenir en arrière.

Pour activer le mode replace, ajoutez l'attribut replace sur Link ou NavLink :

<Link to="/autre" replace />

Navigation programmatique

Utilisez les méthodes de l'objet history (disponible uniquement dans les composants de route) :

• props.history.push('/chemin', state)
• props.history.replace('/chemin', state)
• props.history.goBack()
• props.history.goForward()
• props.history.go(n) (positif avant, négatif arrière)

withRouter

Pour donner accès aux propriétés de routage (history, location, match) à un composant qui n'est pas directement une route, utilisez le HOC withRouter :

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

class MonComposant extends React.Component { ... }

export default withRouter(MonComposant);