Question

我打算在我的应用中设置以下路线。我目前正在使用React-Router 2.7。

/
/stored_systems
/stored_systems/schemas/:schema_id
/stored_systems/schemas/:schema_id/systems/:system_id
/runtime
/runtime/mainlines/:mainline_id
/runtime/mainlines/:mainline_id/valve_groups/:valve_group_id

我已经编写了如下路由器配置。

<Route path='/' component={App}>
  <IndexRoute component={StoredSystems} />

  <Route path='/stored_systems' component={StoredSystems} >
    <IndexRoute component={SchemasList} />
    <Route path='/stored_systems/schemas/:schema_id' component={Schema} />
    <Route path='/stored_systems/schemas/:schema_id/systems/:system_id' component={System} />
  </Route>

  <Route path='/runtime' component={Runtime} >
    <IndexRoute component={MainLinesList} />
    <Route path='/runtime/mainlines/:mainline_id' component={Mainline} />
    <Route path='/runtime/mainlines/:mainline_id/valve_groups/:valve_group_id' component={ValveGroup} />
  </Route>
</Route>

StoredSystems和Runtime是无状态组件，基本上呈现{props.children}。

现在，如果我转到/ stored_systems，它将正确呈现SchemasList组件。像/ stored_systems / schemas / schema1这样的路由可以正确呈现。

但是，如果我转到/，它将呈现StoredSystems组件，而不是它的子组件。好吧，没有定义任何子项，因为它正在加载一个IndexRoute。

当我导航到root时，如何在StoredSystems中呈现SchemaList？

Answer 1

移动路径中的/并设置路径，例如

<Route component={App}>
  <Route path = '/' component={StoredSystems} >
     <IndexRoute component={SchemasList} />
  </Route>

  <Route path='/stored_systems' component={StoredSystems} >
    <IndexRoute component={SchemasList} />
    <Route path='/stored_systems/schemas/:schema_id' component={Schema} />
    <Route path='/stored_systems/schemas/:schema_id/systems/:system_id' component={System} />
  </Route>

  <Route path='/runtime' component={Runtime} >
    <IndexRoute component={MainLinesList} />
    <Route path='/runtime/mainlines/:mainline_id' component={Mainline} />
    <Route path='/runtime/mainlines/:mainline_id/valve_groups/:valve_group_id' component={ValveGroup} />
  </Route>
</Route>

在React-router v3中使用嵌套路由的索引路由

1 个答案: