const [defaultKey, setDefaultKey] = useState("");
const navigate = useNavigate();
const location=useLocation()
const handleClick = (e) => {
navigate("/" + e.key);
setDefaultKey(e.key);
};
// 一般加个空数组就是为了模仿componentDidMounted
useEffect(()=>{
let path = location.pathname;
let key = path.split('/')[1];
setDefaultKey(key)
}, [location.pathname])
<Menu
onClick={handleClick}
style={{ width: 180 }}
selectedKeys={[defaultKey]}
mode="inline"
className="aside"
theme="dark"
>
<Menu.Item key="listlist">
<ReadOutlined /> 查看文章列表List
</Menu.Item>
<Menu.Item key="listtable">
<ReadOutlined /> 查看文章列表Table
</Menu.Item>
<Menu.Item key="edit">
<EditOutlined /> 文章编辑
</Menu.Item>
<Menu.Item key="means">
<DatabaseOutlined /> 修改资料
</Menu.Item>
</Menu>
实现了路由的跳转