29

React-Router 内にいくつかのネストされたルートを設定しています (v0.11.6 は私が取り組んでいるものです) が、ネストされたルートの 1 つにアクセスしようとすると、親ルートがトリガーされます。

私のルートは次のようになります。

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

ルートを折りたたむと、次のようになります。

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

それは正常に動作します。私が入れ子にした理由は、「ダッシュボード」の下に複数の子があり、それらすべてdashboardに URL のプレフィックスを付けたいからです。

4

3 に答える 3

13

これは、react-router 1.0.0 に対する @bjfletcher の回答の更新です。アップグレード ガイドに記載されているとおり:

RouteHandlerなくなっている。アクティブなルートに基づいて、コンポーネントRouterが自動的に読み込まれるようになりました。this.props.children

だから代わりに

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

あなたが使用します：

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

于 2015-10-21T04:18:18.087 に答える
0

同様の問題がありました。次のスニペットがうまくいくと思います：

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

  <DefaultRoute handler={availableRoutes.Dashboard}/>
</Route>
...
于 2015-10-01T07:17:15.970 に答える