React Router V6 配置嵌套路由，实现Antd菜单切换

实现antd菜单配置嵌套路由，在入口文件App中点击菜单，切换页面中部的内容。

安装最新的react-router/react-router-dom包

npm install react-router react-router-dom

配置Router文件

在router文件中引入组件，

const router = createHashRouter([
    {
        path: "/",
        element: <App />,
        children: [
            {
                path: "/",
                index: true,
                element: <Dashboard />,
            },{
                path: "/system",
                element: <SystemConfig />,
                children: [
                    {
                        path: "/system/user",
                        element: <User />,
                    }
                ]
            },{
                path: "/alarm",
                element: <Alarm />,
            },{
                path: "/history",
                element: <History />,
            }
        ]
    },
]);

index文件中引入Router

import { RouterProvider } from 'react-router-dom';
import router from './router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

App文件中在切换子组件的位置插入组件

import React, { Children, useState } from 'react';
import { Menu, Layout, Button, theme, ConfigProvider } from 'antd';
import { Outlet } from 'react-router';
import { useNavigate } from "react-router-dom";
import {
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  WarningOutlined
} from '@ant-design/icons';
import darkTheme from './theme';
import "./App.css"


const { Header, Sider, Content } = Layout;
const items = [{
  key: "/",
  icon: <HomeOutlined />,
  label: "Dashboard"
}, {
  key: "/system",
  icon: <SettingOutlined />,
  label: "Config",
  children: [{
    key: "/system/User",
    icon: <UserOutlined />,
    label: "User",
  }]
},{
  key: "/alarm",
  icon: <WarningOutlined />,
  label: "Alarm"
},{
  key: "/history",
  icon: <HomeOutlined />,
  label: "history"
}
];
function App() {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const clickMenuItem = (e) => {
    navigate(e.key);
  }

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <ConfigProvider theme={{algorithm: theme.darkAlgorithm }}>
    <Layout className="layout-container">
      <Header style={{ padding: 0}}>
        <Button
          className='collapsed-button'
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() => setCollapsed(!collapsed)}
        />
        React Router V6 + Antd
      </Header>
      <Layout>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <Menu
            defaultSelectedKeys={['/']}
            items={items}
            mode={"inline"}
            onClick={clickMenuItem} />
        </Sider>
        <Content style={{
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
          className='content-container'> 
          <Outlet />
        </Content>
      </Layout>
    </Layout>
    </ConfigProvider>
  );
}

export default App;

代码位置： github.com/shanshanche…