React点击菜单跳转到指定路由

嵌套路由

1.设置访问“/”对应的页面是什么路径
2.再次具体表明子路由所在的位置

const routes = [
    //嵌套路由 ----- start------
    {
        path:'/',
        element:<Navigate to="/count" />
    },
    // 新增含有子路由的配置
    {
        path:'/',
        element:<Home/>,
        children:[
            {
                path:'/count',
                element:withLoadingComponent(<Count/>)
            },
            {
                path:'/about',
                element:withLoadingComponent(<About/>)
            }
        ]
    },
    //嵌套路由 ----- end------
    
  ]

在菜单列表设置路由跳转

const navigateTo = useNavigate()

const menuClick = (e:{key:string}) =>{
      console.log("点击菜单", e.key);
  
      //点击跳转到指定路由
      navigateTo(e.key)
  
  }

其中e.key对应的是MenuItem列表路径

const items: MenuItem[] = [
    // 列表（“列表名称”，“对应的路径”，“组件”）
  getItem('Option 1', '/count', <PieChartOutlined />),
  getItem('Option 2', '/about', <DesktopOutlined />),]