react项目实战学习笔记-学习25-侧边栏当前项

  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>

实现了路由的跳转