react菜单menu点击菜单项跳转路由样式解决

发布时间:2024-08-22作者:小灵龙点击:119

s问题描述:

  导航菜单点击菜单项有时不管用,样式修改不了。
 

解决办法:
 

import React, { useState,useEffect } from 'react';
import { Link ,useNavigate} from 'react-router-dom';
 

const Head = () => {
    const { Header} = Layout;
    const navigateTo = useNavigate();

    const [currentSelectedkey, setCurrentSelectedkey] = useState('1');  // 当前选中的菜单项  

    const locationPath = window.location.hash;
    useEffect(() => {
        if(locationPath === '#/'){
            setCurrentSelectedkey('1');
        }else{
            setCurrentSelectedkey('2');
        }
    }, [locationPath]);

const items= [
        {
            label: (      
                <Link to="/">首页</Link>
            ),
            key: '1',           
        },
        {
            label: (        
                <Link to="/list">列表页面</Link>
            ),
            key: '2',           
        },
    ];
return (
<Menu mode="horizontal" selectedKeys={[currentSelectedkey]}   items={items} />
)
 

标签: