Я использую 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>
то в моем компоненте Navbar у меня есть
<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.info(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, а затем изменить его цвет, если он активен, но есть случай, когда у меня есть метка «Категория», которая имеет раскрывающееся меню, содержащее для «veg» и "non-veg", так что я хочу также изменить цвет метки "Category", когда пользователь находится либо в /category/veg, либо в /caegory/:non-veg, поскольку это компонент Navbar console.info( props.location) здесь не определено, потому что я полагаю, что это не так. Любой другой способ здесь >
во-первых, примерно console.info(props.location)
превращается в undefined
, вы уверены, что обернули компонент withRouter
? также, если это функциональный компонент, вы можете использовать хук let location = useLocation()
во-вторых, вы можете управлять именем класса вручную, например
<span className = {`${props.location.pathname.split('/').includes('category') ? 'routeActive' : 'linkText' }`}>Categories </span>