Question

我有一个具有这种简单导航的反应路由器应用程序：

    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

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

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

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

React Router使链路对子路由不起作用

1 个答案: