如何解决反应路由器 dom 将活动类设置为 NavLink
我使用 React-router-dom 进行导航
Routes.js
<Router>
<Switch>
<Route path="/" exact component={HomePage} activeClassName="routeActive"/>
<Route path="/login" exact component={Login} activeClassName="routeActive"/>
<Route path="/category/veg" exact component={Veg} activeClassName="routeActive"/>
<Route path="/category/non-veg" exact component={NonVeg} activeClassName="routeActive"/>
</Switch>
</Router>
然后在我的导航栏组件中
<div className="leftNavItems">
<ul className="navItemsUL">
<li className="navItemsLI">
<NavLink to="/" exact className="linkText" activeClassName="routeActive">
Home
</NavLink>
</li>
<li className="navItemsLI">
<NavLink to="/login" exact className="linkText" activeClassName="routeActive">
About us
</NavLink>
</li>
<div className="dropdown">
{console.log(props)}
{props.location}
<span className={` linkText`}>Categories </span>
<i className="fas fa-caret-down downIcon" />
<div className="dropdownContent">
<ul className="dropdownContentUL">
<li className="dropdownContentLI">
<Link to="/category/:veg" className="dropdownLinkText">
Veg
</Link>
</li>
<li className="dropdownContentLI">
<Link to="/category/:non-veg" className="dropdownLinkText">
Non Veg
</Link>
</li>
</ul>
</div>
</div>
</ul>
</div>
正如你所看到的,我已经使用“activeClassName”作为 Navlink 来设置 className,然后在它处于活动状态时更改它的颜色,但有一种情况,我有一个标签“Category”,它有一个下拉菜单,其中包含“veg”和“non-veg”,所以我想要的是当用户在 /category/veg 或 /caegory/:non-veg 中时还需要更改“Category”标签的颜色,因为它是导航栏组件控制台.log(props.location) 在这里是未定义的,因为我认为它不是内在的。这里的任何其他方式>
解决方法
首先,大约console.log(props.location)
变成了undefined
,你确定你用withRouter
包裹了组件吗?此外,如果它是一个函数组件,您可能会使用钩子 let location = useLocation()
其次,可以像
一样手动控制类名 <span className={`${props.location.pathname.split('/').includes('category') ? 'routeActive' : 'linkText' }`}>Categories </span>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。