Reactjs 活动导航链接到父元素

我使用的是React Router v4，在我的导航链接上，我想启用

NavLink

父元素的

active

类名，而不是

NavLink

本身

即使我不在

开关

元素中，是否有方法访问路径（

匹配

）

还是我必须保持状态？因为我觉得它有点缺少路由器的概念

下面是我的示例，我想将

active

className应用于

li

元素而不是

NavLink

：

const {
  HashRouter,
  Switch,
  Route,
  Link,
  NavLink,
} = ReactRouterDOM

const About = () => (
    <article>
        My name is Moshe and I'm learning React and React Router v4.
    </article>
);

const Page = () => (
    <Switch>
      <Route exact path='/'  render={() => <h1>Welcome!</h1>} />
      <Route path='/about' component={About}/>
    </Switch>
);

const Nav = () => (
    <nav>
        <ul>
            <li><NavLink exact to="/">Home</NavLink></li>
            <li><NavLink to="/about">About</NavLink></li>
        </ul>
    </nav>
);

class App extends React.Component {
    render() {
        return (
            <div>
                <Nav />
                <Page />
            </div>
        );
    }
}
ReactDOM.render((
    <HashRouter>
        <App />
    </HashRouter>),
    document.querySelector("#app"));

const{
哈希路由器，
转换
路线,，
链接
导航链接，
}=反应路线图
const About=（）=>(
这似乎不太容易实现。我使用了中描述的路由器的
HOC。它提供了对
{match，location，history}的访问权限
来自
道具
位于
路线
s之外的组件内部。在示例中，我包装了
导航
组件以获取
位置
及其
路径名
。下面是示例代码：

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

类导航扩展了React.Component{
getNavLinkClass=（路径）=>{
返回this.props.location.pathname==路径？'active'：''；
}
render（）{
返回(

Home
关于

)};
}
Nav=带路由器（Nav）；

您可能需要在路由中处理
params
（如果有），以正确匹配。但您仍然必须匹配
NavLink
中的每条路径，这可能不是很好的代码。但其想法是，当路线更改时，
Nav
将重新命名，并突出显示正确的
li

下面是一个关于的工作示例。
可以通过路由组件实现

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


{（{match}）=>关于


参考资料：
对于我的案例，我找到了更简单的解决方案。我有嵌套项，但我知道每个嵌套的基础

例如，嵌套的基础是
/customer
，它包含如下项
/customer/list
，
/customer/roles

因此，在父
NavLink

代码和解释如下：

<NavLink
to={item.route}
activeClassName={classes.activeItem}
onClick={e => handleItemClick(e, key)}
isActive={(match, location) => {
         // remove last part of path ( admin/customer/list becomes admin/customer for example )
         const pathWithoutLastPart = location.pathname.slice(0, location.pathname.lastIndexOf("/"));
              // if current parent is matched and doesn't contain childs activate it 
              if (item.items.length === 0 && match) {
                return true;
              } 
              // if sliced path matches parent path 
              in case of customer item it becomes true ( admin/customer === admin/customer )
              else if (pathWithoutLastPart === item.route) {
                return true;
              } 
              // else inactive item
              else {
                return false;
              }
            }}
          >
...
</NavLink>

handleItemClick（e，key）}
isActive={（匹配，位置）=>{
//删除路径的最后一部分（例如，admin/customer/list变为admin/customer）
const pathWithOutlatePart=location.pathname.slice（0，location.pathname.lastIndexOf（“/”）；
//如果当前父项匹配且不包含子项，则激活它
if（item.items.length==0&&match）{
返回true；
} 
//如果切片路径与父路径匹配
如果是客户项，则为真（管理员/客户===管理员/客户）
else if（pathWithOutlatePart==item.route）{
返回true；
} 
//其他非活动项
否则{
返回false；
}
}}
>
...

现在，父母和他的孩子在一起
如果您完全放弃
NavLink
组件，您可以使用
useHistory（）
和
useLocation（）
从
react router dom
创建自己的组件，模拟
NavLink
的“活动性”

Dashboard.js
const routeItems=[
{route:'/route1'，文本：'route 1'}，
{route:'/route2'，文本：'route 2'}，
];

在
NavBar.js
中，我们只需检查当前活动路线是否与页面上任何单个项目的路线相同

NavBar.js
从“react router dom”导入{useHistory，useLocation}；
常量导航栏=（道具）=>{
const{routeItems}=props；
const history=useHistory（）；
const location=useLocation（）；
const navItems=routeItems.map（（navItem）=>{
返回(
{
历史推送（navItem.路线）；
}}
>
{navItem.text}
);
});
返回（navItems）；
};
导出默认导航栏；
对于v4版本，请检查此链接