Comment structurer les routes imbriquées dans React Router v4 et v5 ?

Routes imbriquées dans React Router

Dans les versions 4 et 5 de React Router, les routes imbriquées impliquent une approche légèrement différente. Au lieu d'imbriquer composants, vous les placez dans un autre .

Par exemple, la configuration de route imbriquée suivante :

<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} />

Doit être structurée comme suit :

<Route path="/" component={Frontpage} />
<Route path="/admin" component={Backend} />

Dans ces composants, vous pouvez définir les routes enfants en tant que sous-composants du composant parent, comme démontré dans cet exemple :

<code class="javascript">const Frontpage = ({ match }) => (
  <div>
    {/* Child routes for the frontend */}
    <Link to={`${match.url}/home`}></Link>
    <Link to={`${match.url}/about`}></Link>
    <Route path={`${match.path}/home`} component={HomePage} />
    <Route path={`${match.path}/about`} component={AboutPage} />
  </div>
);

const Backend = ({ match }) => (
  <div>
    {/* Child routes for the admin area */}
    <Link to={`${match.url}/home`}></Link>
    <Link to={`${match.url}/users`}></Link>
    <Route path={`${match.path}/home`} component={Dashboard} />
    <Route path={`${match.path}/users`} component={UserPage} />
  </div>
);</code>

Cette structure révisée garantit que /home dans le composant frontend est accessible à /, tandis que /admin/ home dans le composant backend est accessible dans /admin/home.

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!