Active NavLink到父元素

Question

我使用的是React Router v4，我有一个案例，在我的导航链接上，我想将active className设置为NavLink父元素，而不是{{1}本身。

是否有办法访问路径（NavLink），即使我不在match元素内？

或者我必须保持状态吗？因为我觉得它有点缺少路由器的想法。

以下是我的示例，我想将Switch className应用于active元素而不是li：

NavLink

https://codepen.io/moshem/pen/ypzmQX

Answer 1

看起来它很容易实现。我使用了react router docs中描述的withRouter HOC。它可以从位于{ match, location, history }之外的组件内的props访问Routes。在示例中，我将Nav组件包装起来以获取location及其pathname。以下是示例代码：

class Nav extends React.Component {
 getNavLinkClass = (path) => {
   return this.props.location.pathname === path ? 'active' : '';
 }
 render() {
  return (
    <nav>
      <ul>
        <li className={this.getNavLinkClass("/")}><NavLink exact to="/">Home</NavLink></li>
        <li className={this.getNavLinkClass("/about")}><NavLink to="/about">About</NavLink></li>
      </ul>
    </nav>
  )};
}
Nav = withRouter(Nav);

您可能需要在路线中照顾params（如果有的话），以便正确匹配。但是你仍然必须匹配NavLink中的每个路径，这可能不是漂亮的代码。但我们的想法是，当路线发生变化时，会重新呈现Nav并突出显示正确的li。

以下是codesandbox上的一个工作示例。

Answer 2

可以通过Route组件实现

<ul>
  <Route path="/about">
    {({ match }) => <li className={match ? 'active' : undefined}><Link to="/about">About</Link></li>
  </Route>
</ul>

参考：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#children-func

Answer 3

我发现有嵌套项目的情况更简单，但是我知道每个嵌套的基础

例如，嵌套的基础是/customer，其中包含类似这样的项 /customer/list，/customer/roles ...

在父级isActive的{​​{1}}道具中也加入了一些逻辑

带有向下解释的代码：

NavLink

现在父母与孩子一起活跃

Answer 4

如果您完全放弃了NavLink组件，则可以使用{{}中的NavLink和useHistory()来创建自己的组件来模拟useLocation()的“活动性”。 1}}。

Dashboard.js

react-router-dom

在const routeItems = [ { route: '/route1', text: 'Route 1' }, { route: '/route2', text: 'Route 2' }, ]; <Router> <NavBar routeItems={routeItems} /> </Router> 中，我们只需要检查当前活动路线是否与

中任何单个项目的路线相同即可。

NavBar.js

NavBar.js