web-dev-qa-db-fra.com

Routes imbriquées dans React Router v4

J'essaie de configurer des itinéraires imbriqués pour ajouter une mise en page commune. Vérifiez le code:

  <Router>
    <Route component={Layout}>
      <div>
        <Route path='/abc' component={ABC} />
        <Route path='/xyz' component={XYZ} />
      </div>
    </Route>
  </Router>

Bien que cela fonctionne parfaitement, je reçois toujours l'avertissement:

Avertissement: Vous ne devez pas utiliser <composant de route> et <enfants de route> dans le même itinéraire; sera ignoré

react-routerreact-router-v4
63
Sean Gillespie

La réponse de CESCO rend d'abord le composant AppShell, puis l'un des composants à l'intérieur de Switch. Mais ces composants NE vont PAS restituer à l'intérieur de AppShell, ils ne seront PAS des enfants de AppShell.

En v4 pour envelopper des composants, vous ne mettez plus votre Routes dans un autre Route, vous placez votre Routes directement dans un composant.
I.E: pour le wrapper au lieu de <Route component={Layout}>, vous utilisez directement <Layout>.

Code complet:

  <Router>
    <Layout>
      <Route path='/abc' component={ABC} />
      <Route path='/xyz' component={XYZ} />
    </Layout>
  </Router>

La modification est probablement expliquée par l'idée de rendre React Router v4 purement React de sorte que vous n'utilisez que des éléments React comme avec tout autre React élément.

EDIT: J'ai supprimé le composant Switch car ce n'est pas utile ici. Voir quand c'est utile ici .

80
Ilan Schemoul

Vous devez utiliser le composant switch pour imbriquer au bon fonctionnement de Nice. Voir aussi ceci question

// main app
<div>
    // not setting a path prop, makes this always render
    <Route component={AppShell}/>
    <Switch>
        <Route exact path="/" component={Login}/>
        <Route path="/dashboard" component={AsyncDashboard(userAgent)}/>
        <Route component={NoMatch}/>
    </Switch>
</div>

Et les composants de la version 4 ne prennent pas d'enfants, vous devez plutôt utiliser l'accessoire de rendu.

<Router>
    <Route render={(props)=>{
      return <div>Whatever</div>}>
    </Route>
  </Router>
9
CESCO

Essayer:

<Router>
    <Layout>
        <Route path='/abc' component={ABC} />
        <Route path='/xyz' component={XYZ} />
    </Layout>
</Router>
5
marrekk

Si vous ne voulez pas que Layout s'exécute à l'état chargé. Utilisez cette méthode:

<div className="container">
    <Route path="/main" component={ChatList}/>
    <Switch>
        <Route exact path="/" component={Start} />
        <Route path="/main/single" component={SingleChat} />
        <Route path="/main/group" component={GroupChat} />
        <Route path="/login" component={Login} />
    </Switch>
</div>

Chaque fois que l'historique change, composantWillReceiveProps dans la liste de chat sera exécuté.

2
Avare Kodcu

Vous pouvez aussi essayer ceci:

<Route exact path="/Home"
                 render={props=>(
                                 <div>
                                      <Layout/>
                                      <Archive/>
                                </div>
                       )} 
    />
0
Mohamed Yahya