在 react router v4 中突出显示默认 link

Question

我正在为某人访问 site.com/,

的根目录创建一个简单的侧边栏

Test
Test2

当我点击其中任何一个时，它会在侧面加载它们的组件，并且 link 会突出显示。

现在我默认使用 / 的路由来加载测试组件。

我的问题是，如何在转到 / 时让测试 link 默认突出显示？

<Router>
    <section>
      <nav>
        <NavLink to="/test" activeClassName="active">Test</NavLink>
        <NavLink to="/test2" activeClassName="active">Test2</NavLink>
      </nav>
      <aside>
        <Switch>
          <Route exact path="/" component={Test} />
          <Route path="/test" exact={true} component={Test} />
          <Route path="/test2" exact={true} component={Test2} />   
        </Switch>
      </aside>
    </section>
</Router>

还有其他设置默认组件的方法吗？

Answer 1

由于在 / 和 /test 处呈现的组件相同，您可以简单地从 / 重定向到 /test，在这种情况下，您的 NavLink 将正确突出显示

<Router>
    <section>
      <nav>
        <NavLink to="/test" activeClassName="active">Test</NavLink>
        <NavLink to="/test2" activeClassName="active">Test2</NavLink>
      </nav>
      <aside>
        <Switch>
          <Redirect exact from="/" to="/test" component={Test} />
          <Route path="/test" exact={true} component={Test} />
          <Route path="/test2" exact={true} component={Test2} />   
        </Switch>
      </aside>
    </section>
</Router>

在 react router v4 中突出显示默认 link

Highlight default link in react router v4

reactjs

react-router

react-router-v4