React router dom将活动类设置为NavLink

Question

我正在使用React路由器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/vig或/caegory/：non-vig时，标签，因为它是Navbar组件控制台。log(props.location(在这里是未定义的，因为我想它不在这里。在这里周围的任何其他方式>

Answer 1

首先，关于console.log(props.location)变成undefined，你确定用withRouter包装组件吗？如果它是一个功能组件，你也可以使用钩子let location = useLocation()

其次，您可以像一样手动控制类名

<span className={`${props.location.pathname.split('/').includes('category') ? 'routeActive' : 'linkText' }`}>Categories </span>