Faire du routage dynamique dans React.js signifie généralement d’adapter les routes de votre application en fonction des conditions de l’environnement ou des actions de l’utilisateur. Voici comment vous pouvez le faire :
En utilisant `react-router`, qui est la bibliothèque de routage la plus populaire pour React.
Premièrement, installez react-router-dom dans votre projet à l’aide de npm ou yarn.
```
npm install react-router-dom
ou
yarn add react-router-dom
```
Disons que vous avez un composant `ProductDetails` qui est censé être affiché lorsque l’utilisateur clique sur un lien vers un produit.
Ainsi, pour charger ce composant de manière dynamique, vous pouvez utiliser la fonction `import()` qui retourne une promesse. Cette promesse résout à un module contenant les exportations du module spécifié.
```
import React, { lazy, Suspense } from ‘react’;
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
const ProductDetails = lazy(() => import(‘./ProductDetails’));
function App() {
return (
export default App;
```
Ici, `lazy()` est une fonction qui vous permet de rendre un import dynamique en tant que composant de routage normal.
La balise `Suspense` permet à votre composant d’attendre jusqu’à ce que votre ProductDetails soit prêt. Vous pouvez afficher un feedback de chargement pendant ce temps avec fallback.
`:id` dans l’URL est un paramètre. Vous pouvez y accéder dans votre composant ProductDetails avec `this.props.match.params.id`.
Donc, avec `react-router` et le code splitting dynamique, vous pouvez facilement faire du routage dynamique dans vos applications React.
