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

Posted 2023-02-21

【中文标题】突出显示反应路由器 v4 中的默认链接

【英文标题】：Highlight default link in react router v4

【发布时间】：2018-09-22 18:06:33

【问题描述】：

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

Test
Test2

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

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

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

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

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

【问题讨论】：

已链接 - ***.com/q/29552601/104380

【参考方案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>