web-dev-qa-db-ja.com

React Router v4のネストされたルート

いくつかのネストされたルートをセットアップして、共通のレイアウトを追加しようとしています。コードを確認してください：

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

これは完全に正常に機能しますが、まだ警告が表示されます。

警告：同じルートで<Routeコンポーネント>と<Route children>を使用しないでください。無視されます

react-routerreact-router-v4
63
Sean Gillespie

CESCOの答えは、最初にコンポーネントAppShellthenのコンポーネントをSwitch内にレンダリングします。ただし、これらのコンポーネントはAppShell内でレンダリングされません。AppShellの子にはなりません。

V4では、コンポーネントをラップするためにRoutesを別のRouteの中に入れないで、Routesをコンポーネントの中に直接入れます。
I.E：<Route component={Layout}>の代わりにラッパーには、<Layout>を直接使用します。

完全なコード：

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

この変更は、おそらくReact Router v4を純粋なReactにするアイデアによって説明されるため、他のReact要素と同様にReact要素のみを使用します。

編集：ここでは役に立たないのでSwitchコンポーネントを削除しました。いつ役立つかを確認してください here 。

80
Ilan Schemoul

Niceを機能させるには、switchコンポーネントを使用してネストする必要があります。また、これを参照してください 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>

また、バージョン4のコンポーネントは子を取りません。代わりに、レンダープロップを使用する必要があります。

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

試してください：

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

ロード時にLayoutを実行したくない場合。この方法を使用します。

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

履歴が変更されるたびに、ChatListでcomponentWillReceivePropsが実行されます。

2
Avare Kodcu

これを試すこともできます：

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