Comment implémenter le routage imbriqué dans React Router v4/v5 ?

Routage imbriqué avec React Router v4/v5

React Router fournit un mécanisme puissant pour créer des routes imbriquées dans vos applications React. Cela vous permet de modulariser vos itinéraires et de créer des structures de navigation complexes.

Pour créer des itinéraires imbriqués dans React Router v4, vous devez définir un itinéraire parent et y spécifier des itinéraires enfants. Par exemple, pour séparer votre application en sections frontend et admin :

<code class="jsx"><Match pattern="/" component={Frontpage}>
  <Match pattern="/home" component={HomePage} />
  <Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
  <Match pattern="/home" component={Dashboard} />
  <Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} /></code>

Cependant, il est important de noter que dans React Router v4, les routes ne sont pas imbriquées dans d'autres routes. Au lieu de cela, les routes enfants sont placées à l'intérieur d'un composant parent. Ainsi, le code ci-dessus serait converti en :

<code class="jsx"><Route path="/" component={Frontpage} /></code>

Avec ce composant parent :

<code class="jsx">const Frontpage = ({ match }) => (
  <div>
    <h2>Frontend</h2>
    <Link to={`${match.url}/home`}>Home</Link>
    <Link to={`${match.url}/about`}>About</Link>
    <Route path={`${match.path}/home`} component={HomePage} />
    <Route path={`${match.path}/about`} component={AboutPage} />
  </div>
);</code>

De même, pour la section admin :

<code class="jsx"><Route path="/admin" component={Backend} /></code>

Avec ce composant parent :

<code class="jsx">const Backend = ({ match }) => (
  <div>
    <h2>Admin</h2>
    <Link to={`${match.url}/home`}>Dashboard</Link>
    <Link to={`${match.url}/users`}>Users</Link>
    <Route path={`${match.path}/home`} component={Dashboard} />
    <Route path={`${match.path}/users`} component={UserPage} />
  </div>
);</code>

Cette approche vous permet de créer des composants modulaires et réutilisables qui encapsulent à la fois les définitions d'itinéraire et le rendu de l'interface utilisateur pour différentes sections de votre candidature.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!