Question

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

Test
Test2

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

现在我默认使用Route for /加载测试组件。

我的问题是，当进入/？

时，如何默认突出显示测试链接

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

突出显示反应路由器v4中的默认链接

1 个答案: