React Router使链路对子路由无效

Question

我有一个具有以下简单导航功能的React Router应用：

    React.DOM.ul(
      {className: 'navigation'},
      React.DOM.li(
        {},
        React.createElement(
          Link,
          {to: '/', activeClassName: 'active'},
          React.DOM.i({className: 'fa fa-tachometer'}),
          'Dashboard'
        )
      ),
      React.DOM.li(
        {},
        React.createElement(
          Link,
          {to: '/help', activeClassName: 'active'},
          React.DOM.i({className: 'fa fa-life-ring'}),
          'Help'
        )
      )
    )

当我加载/仪表板链接时，正如人们所期望的那样。 单击“帮助”会加载/help并使“帮助”链接处于活动状态，但也会使“仪表板”链接保持活动状态。

从我可以告诉/help仍然匹配/与Link假设我要积极地出现在某个路由的整个层次结构。 是否可以禁用此行为？

我的路由器：

  React.createElement(Route, {
    path: '/',
    component: Layout
  },
    React.createElement(IndexRoute, {component: Dashboard}),
    React.createElement(Route, {path: '/help', component: Help})
  )

Answer 1

如果将Link的属性onlyActiveOnIndex设置为true ，则只有在当前路径与链接路径完全匹配时，该属性才处于活动状态。

对我来说，这可以通过在仪表板链接上进行设置来解决问题，例如

    React.createElement(
      Link,
      {to: '/', activeClassName: 'active', onlyActiveOnIndex: true},
      React.DOM.i({className: 'fa fa-tachometer'}),
      'Dashboard'
    )