javascript - react 路由器 : nested resources

Question

我有两条路线:

/resource/1/

/resource/1/nested_resource/2

并适当<Link />成分。当我去路线 /resource/1/ - 仅转发到 /resource/1/ 的链接有active类(class)。

但是当我去 /resource/1/nested_resource/2路径，链接 /resource/1/和 /resource/1/nested_resource/2有活跃课。

在第二种情况下，有没有办法只为嵌套路由链接提供事件类，如 /resource/1/nested_resource/2 ？

 <Route path='/' component={Layout}>
  <IndexRoute component={Index} />
  <Route path='resource' >
    <IndexRoute component={Resources} onEnter={onEnter} />
    <Route path='new' component={NewResource} />
    <Route path=':resourceId' onEnter={onEnter}>
      <IndexRoute component={ShowResource} onEnter={onEnter} />
      <Route path='nested_resource' >
        <Route path=':nestedResourceId' component={NestedResource} />
        <Route path='new' component={NestedResourceNew} />
      </Route>
    </Route>
  </Route>
</Route>

Answer 1

你可以使用一个 ，它只有在父路由匹配时才会被激活。

react 路由器 documentation说——

If you were to < Link to="/">Home in this app, it would always be active since every URL starts with /. This is a problem because we'd like to link to Home but only be active if Home is rendered.

To have a link to / that is only active when the Home route is rendered, use < IndexLink to="/">Home< /IndexLink>.