ant-design版本是5.1.1，路由版本是v6的

新版本的导航菜单路由设置与旧版的不太一样，刚开始的时候甚至不知道该怎么写

实现效果：

代码：

import React, { useState } from 'react';
import {
  DesktopOutlined,
  EditFilled,
  PieChartOutlined,
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { useNavigate, Routes, Route } from 'react-router-dom'
import "./App.css"
import Home from './pages/home';
import Charts from './pages/charts'
const { Header, Content, Footer, Sider } = Layout;
function getItem (label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const items = [
  getItem('记账', '/home', ),
  getItem('统计', '/charts', ),
];
const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate()
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const onClick = (e) => {
    navigate(e.key, { replace: true })
  }
  return (
    {
        minHeight: '100vh',
      }}
    >
      collapsed} onCollapse={(value) => setCollapsed(value)}>
        'title' >
          
          {{ marginLeft: 15 }}>记账管家