React项目: 菜单选中问题

15_React/day-8/code/my-app/src/layout/index.jsx

@@ -16,13 +16,17 @@ import {
   DownOutlined,
 } from '@ant-design/icons';
 import { useSelector } from 'react-redux';
-import { useNavigate, Link, redirect } from 'react-router-dom';
+
+import { useNavigate, Link, useLocation } from 'react-router-dom';
 import { useState, createElement, useEffect } from 'react';
 import defaultAvatar from '../logo.svg';
 
 const { Header, Sider, Content, Footer } = Layout;
 
 export default function Index() {
+  // 获取浏览地址的hook
+  const location = useLocation();
+  console.log(location);
   // 菜单收起和展开状态的数据
   let [collapsed, setCollapsed] = useState(false);
   // 面包屑的二级显示名称
@@ -62,7 +66,7 @@ export default function Index() {
           导航菜单
         </Button>
         <Menu
-          defaultSelectedKeys={['/']}
+          selectedKeys={[location.pathname]}
           mode="inline"
           inlineCollapsed={collapsed}
           items={items}