Routes imbriquées dans React Router v4

Question

J'essaie de mettre en place des routes imbriquées 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 <Route component> et <Route children> dans la même route ; elles seront ignorées

Answer 1

La réponse du CESCO rend d'abord la composante AppShell puis l'un des composants à l'intérieur Switch . Mais ces composants ne seront PAS rendus à l'intérieur de l'appareil. AppShell ils ne seront PAS des enfants de AppShell .

Dans la v4 pour envelopper les composants vous ne mettez plus votre Route à l'intérieur d'un autre Route vous mettez votre Route 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>

Le changement s'explique probablement par l'idée de faire de React Router v4 un pur React. React afin que vous n'utilisiez que des éléments React comme avec n'importe quel autre élément React.

EDIT : J'ai supprimé le Switch car il n'est pas utile ici. Voir quand c'est utile aquí .

Answer 2

Vous devez utiliser le composant switch pour que l'imbrication fonctionne bien. Aussi, voyez 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, à la place, vous devez utiliser le render prop.

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

Answer 3

Essayez :

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

Answer 4

Si vous ne voulez pas Layout à exécuter en charge. 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'histoire change, composantWillReceiveProps dans la ChatList s'exécutera.

Answer 5

Vous pouvez également essayer ceci :

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