reactjs - 在 React Router v4 中突出显示默认链接

Question

当有人访问 site.com/的根目录时，我正在创建一个简单的侧边栏，

Test
Test2

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

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

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

<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>