可以通过以下步骤实现:
useLocation
钩子函数可以获取当前的路由状态。该钩子函数返回一个包含当前路径和其他路由信息的对象。useLocation
钩子函数获取当前路由状态,并根据当前路径与导航项目的路径进行比较,确定哪个导航项目处于激活状态。以下是一个示例代码:
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
const Navigation = () => {
const location = useLocation();
const isActive = (path) => {
return location.pathname === path ? 'active' : '';
};
return (
<nav>
<ul>
<li className={isActive('/')}><Link to="/">Home</Link></li>
<li className={isActive('/about')}><Link to="/about">About</Link></li>
<li className={isActive('/contact')}><Link to="/contact">Contact</Link></li>
</ul>
</nav>
);
};
export default Navigation;
在上述代码中,useLocation
钩子函数用于获取当前的路由状态,isActive
函数用于判断当前路径是否与导航项目的路径匹配,如果匹配则添加active
类名,表示该导航项目处于激活状态。
这样,在Reactjs中就可以通过以上方法来获取激活导航项目。
领取专属 10元无门槛券
手把手带您无忧上云