web-dev-qa-db-fra.com

Routes imbriquées dans react-router

Je configure certains itinéraires imbriqués dans React-Router (mais je travaille contre la version v0.11.6), mais chaque fois que j'essaie d'accéder à l'un des itinéraires imbriqués, il déclenche l'itinéraire parent.

Mes itinéraires ressemblent à ceci:

<Route handler={App}>
    <Route name="home" path="/" handler={availableRoutes.Splash} />
    <DefaultRoute handler={availableRoutes.Splash} />

    <Route name="dashboard" handler={availableRoutes.Dashboard}>
        <Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
   </Route>

    <NotFoundRoute handler={NotFound} />
</Route>

Si je réduis les routes vers le haut, cela donne:

<Route handler={App}>
    <Route name="home" path="/" handler={availableRoutes.Splash} />
    <DefaultRoute handler={availableRoutes.Splash} />

    <Route name="dashboard" handler={availableRoutes.Dashboard} />
    <Route name="dashboard-child" path="/dashboard/dashboard-child" handler={availableRoutes.DashboardChild} />

    <NotFoundRoute handler={NotFound} />
</Route>

Ça fonctionne bien. La raison pour laquelle je nidifiais était parce que j'aurais plusieurs enfants sous le "tableau de bord" et que je voulais tous les préfixer avec dashboard dans l'URL.

reactjsreact-router
27
Aaron Powell

La configuration ne concerne pas le routage (malgré son nom) mais davantage sur les dispositions conduites par des chemins.

Donc, avec cette configuration:

<Route name="dashboard" handler={availableRoutes.Dashboard}>
  <Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
</Route>

Il est dit que dashboard-child doit être intégré à dashboard. Comment cela fonctionne, c'est que si dashboard a quelque chose comme ceci:

<div><h1>Dashboard</h1><RouteHandler /></div>

et dashboard-child a:

<h2>I'm a child of dashboard.</h2>

Ensuite, pour le chemin dashboard, il n'y a pas d'enfant incorporé car il n'y a pas de chemin correspondant, ce qui entraîne:

<div><h1>Dashboard</h1></div>

Et pour le chemin dashboard/dashboard-child, l’enfant incorporé a un chemin correspondant, ce qui a pour résultat:

<div><h1>Dashboard</h1><h2>I'm a child of dashboard.</h2></div>
41
bjfletcher

Voici une mise à jour de la réponse de @ bjfletcher pour react-router 1.0.0. Comme indiqué dans le guide de mise à niveau :

RouteHandler est parti. Router remplit maintenant automatiquement this.props.children de vos composants en fonction de la route active.

Donc au lieu de

<div><h1>Dashboard</h1><RouteHandler /></div>

vous utiliseriez:

<div><h1>Dashboard</h1>{this.props.children}</div>

13
Kevin

J'ai eu le même problème. Je pense que l'extrait suivant pourrait fonctionner pour vous:

...
<Route name="dashboard">
  <Route path="/" handler={availableRoutes.Dashboard}/>
  <Route name="dashboard-child" path="dashboard-child" handler={availableRoutes.DashboardChild}/>

  <DefaultRoute handler={availableRoutes.Dashboard}/>
</Route>
...
0
Paweł Janik