webentwicklung-frage-antwort-db.com.de

Verschachtelte Routen in React Router v4

Ich versuche, einige verschachtelte Routen einzurichten, um ein gemeinsames Layout hinzuzufügen. Überprüfen Sie den Code aus:

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

Das funktioniert zwar einwandfrei, aber ich bekomme trotzdem die Warnung:

Warnung: Sie sollten <Routenkomponente> und <Routenkinder> nicht auf derselben Route verwenden. wird ignoriert

63
Sean Gillespie

Die Antwort von CESCO gibt zuerst die Komponente AppShell und dann eine der Komponenten in Switch wieder. Diese Komponenten werden jedoch NICHT in AppShell gerendert. Sie sind NICHT untergeordnet zu AppShell.

Um Komponenten zu verpacken, setzen Sie Ihre Routes nicht mehr in ein anderes Route, sondern setzen Ihre Routes direkt in eine Komponente.
I.E .: für den Wrapper anstelle von <Route component={Layout}> Sie verwenden direkt <Layout>.

Vollständiger Code:

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

Die Änderung erklärt sich wahrscheinlich aus der Idee, React Router v4 so zu gestalten, dass es rein ist React), sodass Sie nur React Elemente verwenden wie bei jedem anderen React element.

BEARBEITEN: Ich habe die Komponente Switch entfernt, da sie hier nicht nützlich ist. Sehen Sie, wann es nützlich ist hier .

80
Ilan Schemoul

Sie müssen die Switch-Komponente zum Verschachteln verwenden, um in Nice zu arbeiten. Siehe auch diese Frage

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

Und Komponenten der Version 4 nehmen keine Kinder auf, stattdessen sollten Sie die Render-Requisite verwenden.

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

Versuchen:

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

Wenn Sie nicht möchten, dass Layout mit Loaded ausgeführt wird. Verwenden Sie diese Methode:

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

Wenn sich der Verlauf ändert, wird componentWillReceiveProps in der ChatList ausgeführt.

2
Avare Kodcu

Sie können dies auch versuchen:

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