javascript - React-Router-Dom 中 1 个 Link 如何监听 2 个路径？

Question

我的 React 应用程序中有这个导航:

<ul className="nav nav-tabs nav-fill">
  <li className="nav-item">
    <NavLink exact to="/" className="nav-link" activeClassName="active">
      Home
    </NavLink>
  </li>  
  <li className="nav-item">
    <NavLink to="/home" className="nav-link" activeClassName="active">
      Home
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink to="/pictures" className="nav-link" activeClassName="active">
      Pictures
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink to="/contact" className="nav-link" activeClassName="active">
      Contact
    </NavLink>
  </li>
</ul>

像这样，有 4 个选项卡，但我只想要 3 个 - “/”和“/home”都应将主页选项卡突出显示为事件状态..

我很确定 React-Router 已经针对这种情况实现了一些东西，但我还没有找到它，有人可以帮忙吗？

Answer 1

您可以利用<Redirect /> :

<Route exact path='/' render={() => (
    <Redirect to="/home" />
)}/>

这将提供一个清晰的位置来识别路由的使用方式，并最终准备好用真实内容替换，而不仅仅是重定向。

如果您只想控制 <NavLink /> 的事件状态使用isActive Prop :

 isActive={(match, location) => {
         return location.pathname === '/home' || location.pathname === '/';
 }}