• antd结合reactRouter实现侧边栏菜单动态渲染

    目录

    声明式方式

    编程式方式

    最终版本

    声明式方式

    目录结构是这个样子的

    首先，需要安装react-router-dom和antd这两个插件（路由前面帖子有讲解）

    yarn add react-router-dom antd     或      npm i react-router-dom antd --save

    然后在index.js中做出配置

    1. import React from 'react'
    2. import ReactDOM from 'react-dom/client'
    3. import App from './App'
    4. // 这里路由采用了浏览器模式
    5. import { BrowserRouter as Router } from 'react-router-dom'
    6. // 一定引入antd的样式
    7. import 'antd/dist/antd.css'
    8.  
    9. const root = ReactDOM.createRoot(document.getElementById('root'))
    10. root.render(
    11.   <React.StrictMode>
    12.     <Router>
    13.       <App />
    14.     Router>
    15.   React.StrictMode>
    16. )

    在router.js文件中写入路由规则（四级五级路由就再进行嵌套）

    1. import Index from '../pages/Index.jsx'
    2. import Demo from '../pages/Demo.jsx'
    3. import { HeartOutlined } from '@ant-design/icons'
    4.  
    5. const routes = [
    6.   {
    7.     path: '/',
    8.     element: <Index />,
    9.     icon: <HeartOutlined />,
    10.     label: '首页',
    11.   },
    12.   {
    13.     path: '/demo',
    14.     element: <Demo />,
    15.     icon: <HeartOutlined />,
    16.     label: '朋友',
    17.   },
    18.   {
    19.     path: '/about',
    20.     label: '关于',
    21.     icon: <HeartOutlined />,
    22.     children: [
    23.       {
    24.         path: 'music',
    25.         element: <Demo />,
    26.         label: '音乐',
    27.         icon: <HeartOutlined />,
    28.       },
    29.       {
    30.         path: 'movie',
    31.         element: <Demo />,
    32.         label: '电影',
    33.         icon: <HeartOutlined />,
    34.       },
    35.     ],
    36.   },
    37.   {
    38.     path: '/my',
    39.     label: '我的',
    40.     icon: <HeartOutlined />,
    41.     children: [
    42.       {
    43.         path: 'money',
    44.         label: '钱包',
    45.         icon: <HeartOutlined />,
    46.         children: [
    47.           {
    48.             path: 'yue',
    49.             element: <Demo />,
    50.             label: '余额',
    51.             icon: <HeartOutlined />,
    52.           },
    53.         ],
    54.       },
    55.       {
    56.         path: 'message',
    57.         element: <Demo />,
    58.         label: '信息',
    59.         icon: <HeartOutlined />,
    60.       },
    61.     ],
    62.   },
    63. ]
    64.  
    65. export default routes

    最后在App.js文件中引入布局组件，实现渲染

    1. import { Layout, Menu } from 'antd'
    2. import React from 'react'
    3. // 引入路由规则文件
    4. import routes from './router/router.js'
    5. import { Link, useRoutes } from 'react-router-dom'
    6.  
    7. const { Sider, Content, Header } = Layout
    8.  
    9. export default function App() {
    10.   const element = useRoutes(routes)
    11.   // Menu组件通过指定items属性，进行菜单渲染
    12.   const items = []
    13.   // 对路由规则数组进行遍历，并对其进行改造，改造成与Menu的items属性相同的结构
    14.   routes.forEach((item) => {
    15.     items.push({
    16.       label: <Link to={item.path}>{item.label}Link>,
    17.       key: item.path,
    18.       icon: item.icon,
    19.       children:
    20.         item.children &&
    21.         item.children.map((child) => {
    22.           return {
    23.             label: <Link to={item.path + '/' + child.path}>{child.label}Link>,
    24.             key: item.path + '/' + child.path,
    25.             icon: child.icon,
    26.             children:
    27.               child.children &&
    28.               child.children.map((sun) => {
    29.                 return {
    30.                   label: (
    31.                     <Link to={item.path + '/' + child.path + '/' + sun.path}>
    32.                       {sun.label}
    33.                     Link>
    34.                   ),
    35.                   key: item.path + '/' + child.path + '/' + sun.path,
    36.                   icon: sun.icon,
    37.                 }
    38.               }),
    39.           }
    40.         }),
    41.     })
    42.   })
    43.   return (
    44.     <>
    45.       <Layout>
    46.         <Sider theme="dark">
    47.           <div
    48.             style={{
    49.               height: '28px',
    50.               margin: '16px',
    51.               background: 'rgba(255, 255, 255, 0.2)',
    52.             }}
    53.           />
    54.           <Menu theme="dark" mode="inline" items={items}>Menu>
    55.         Sider>
    56.         <Layout>
    57.           <Header>Header>
    58.           <Content>{element}Content>
    59.         Layout>
    60.       Layout>
    61.     
    62.   )
    63. }

    这是Menu组件的items结构

    最终的效果如下

    编程式方式

    目录结构是这样的

    首先，需要安装react-router-dom和antd这两个插件（路由前面帖子有讲解）

    yarn add react-router-dom antd     或      npm i react-router-dom antd --save

    然后在index.js中做出配置

    1. import React from 'react'
    2. import ReactDOM from 'react-dom/client'
    3. import App from './App'
    4. // 这里路由采用了浏览器模式
    5. import { BrowserRouter as Router } from 'react-router-dom'
    6. // 一定引入antd的样式
    7. import 'antd/dist/antd.css'
    8.  
    9. const root = ReactDOM.createRoot(document.getElementById('root'))
    10. root.render(
    11.   <React.StrictMode>
    12.     <Router>
    13.       <App />
    14.     Router>
    15.   React.StrictMode>
    16. )

    在router.js文件中写入路由规则（四级五级路由就再进行嵌套）

    1. import Home from '../pages/Home'
    2. import Movie from '../pages/Movie'
    3. import Music from '../pages/Music'
    4. import Money from '../pages/Money'
    5. import Person from '../pages/Person'
    6. import { SmileOutlined } from '@ant-design/icons'
    7.  
    8. const routes = [
    9.   {
    10.     path: '/',
    11.     label: '首页',
    12.     element: <Home />,
    13.     icon: <SmileOutlined />,
    14.   },
    15.   {
    16.     path: '/about',
    17.     label: '关于',
    18.     icon: <SmileOutlined />,
    19.     children: [
    20.       {
    21.         path: 'music',
    22.         label: '音乐',
    23.         element: <Music />,
    24.         icon: <SmileOutlined />,
    25.       },
    26.       {
    27.         path: 'movie',
    28.         label: '电影',
    29.         element: <Movie />,
    30.         icon: <SmileOutlined />,
    31.       },
    32.     ],
    33.   },
    34.   {
    35.     path: '/my',
    36.     label: '我的',
    37.     icon: <SmileOutlined />,
    38.     children: [
    39.       {
    40.         path: 'money',
    41.         label: '余额',
    42.         element: <Money />,
    43.         icon: <SmileOutlined />,
    44.       },
    45.       {
    46.         path: 'message',
    47.         label: '信息',
    48.         icon: <SmileOutlined />,
    49.         children: [
    50.           {
    51.             path: 'person',
    52.             label: '个人信息',
    53.             element: <Person />,
    54.             icon: <SmileOutlined />,
    55.           },
    56.         ],
    57.       },
    58.     ],
    59.   },
    60. ]
    61.  
    62. export default routes

     最后在App.js文件中引入布局组件，实现渲染

    1. import { useState } from 'react'
    2. import { Layout, Menu, Switch } from 'antd'
    3. import { useRoutes, useNavigate } from 'react-router-dom'
    4. import routes from './router/router'
    5. const { Header, Sider, Content } = Layout
    6.  
    7. function App() {
    8.   let element = useRoutes(routes)
    9.   const navigate = useNavigate()
    10.   const items = []
    11.   routes.forEach((item) => {
    12.     items.push({
    13.       label: item.label,
    14.       key: item.path,
    15.       icon: item.icon,
    16.       children:
    17.         item.children &&
    18.         item.children.map((child) => {
    19.           return {
    20.             label: child.label,
    21.             key: item.path + '/' + child.path,
    22.             icon: child.icon,
    23.             children:
    24.               child.children &&
    25.               child.children.map((sun) => {
    26.                 return {
    27.                   label: sun.label,
    28.                   key: item.path + '/' + child.path + '/' + sun.path,
    29.                   icon: sun.icon,
    30.                   // 有四级五级菜单就接着写，最好用递归的方式，但是我不会写
    31.                 }
    32.               }),
    33.           }
    34.         }),
    35.     })
    36.   })
    37.   const [theme, setTheme] = useState('dark')
    38.  
    39.   const changeTheme = (value) => {
    40.     setTheme(value ? 'dark' : 'light')
    41.   }
    42.   const onClick = (e) => {
    43.     navigate(e.key)
    44.   }
    45.   return (
    46.     <div className="App">
    47.       <Layout>
    48.         <Sider>
    49.           <Switch
    50.             checked={theme === 'dark'}
    51.             onChange={changeTheme}
    52.             checkedChildren="Dark"
    53.             unCheckedChildren="Light"
    54.           />
    55.           <Menu theme={theme} onClick={onClick} mode="inline" items={items} />
    56.         Sider>
    57.         <Layout>
    58.           <Header style={{ background: '#ccc' }}>HeaderHeader>
    59.           <Content>{element}Content>
    60.         Layout>
    61.       Layout>
    62.     div>
    63.   )
    64. }
    65.  
    66. export default App

    最终效果

    最终版本

    • 包含了懒加载，直接把路由文件改造成Menu组件需要的结构，这样Menu组件只需要引入router.js文件，并把items属性的值为路由规则即可

    router.js

    1. import { lazy, Suspense } from 'react'
    2. import Home from '../pages/Home'
    3. import { SmileOutlined } from '@ant-design/icons'
    4.  
    5. // 路由懒加载
    6. const Music = lazy(() => import('../pages/Music'))
    7. const Movie = lazy(() => import('../pages/Movie'))
    8. const Money = lazy(() => import('../pages/Money'))
    9. const Person = lazy(() => import('../pages/Person'))
    10.  
    11. const routes = [
    12.   {
    13.     path: '/',
    14.     key: '/',
    15.     label: '首页',
    16.     element: <Home />,
    17.     icon: <SmileOutlined />,
    18.   },
    19.   {
    20.     path: '/about',
    21.     key: '/about',
    22.     label: '关于',
    23.     icon: <SmileOutlined />,
    24.     children: [
    25.       {
    26.         path: 'music',
    27.         key: 'music',
    28.         label: '音乐',
    29.         element: (
    30.           <Suspense fallback={<>}>
    31.             <Music />
    32.           Suspense>
    33.         ),
    34.         icon: <SmileOutlined />,
    35.       },
    36.       {
    37.         path: 'movie',
    38.         key: 'movie',
    39.         label: '电影',
    40.         element: (
    41.           <Suspense fallback={<>}>
    42.             <Movie />
    43.           Suspense>
    44.         ),
    45.         icon: <SmileOutlined />,
    46.       },
    47.     ],
    48.   },
    49.   {
    50.     path: '/my',
    51.     key: '/my',
    52.     label: '我的',
    53.     icon: <SmileOutlined />,
    54.     children: [
    55.       {
    56.         path: 'money',
    57.         key: 'money',
    58.         label: '余额',
    59.         element: (
    60.           <Suspense fallback={<>}>
    61.             <Money />
    62.           Suspense>
    63.         ),
    64.         icon: <SmileOutlined />,
    65.       },
    66.       {
    67.         path: 'message',
    68.         key: 'message',
    69.         label: '信息',
    70.         icon: <SmileOutlined />,
    71.         children: [
    72.           {
    73.             path: 'person',
    74.             key: 'person',
    75.             label: '个人信息',
    76.             element: (
    77.               <Suspense fallback={<>}>
    78.                 <Person />
    79.               Suspense>
    80.             ),
    81.             icon: <SmileOutlined />,
    82.           },
    83.         ],
    84.       },
    85.     ],
    86.   },
    87. ]
    88.  
    89. export default routes

    App.js

    1. import { Layout, Menu } from 'antd'
    2. import { useRoutes, useNavigate } from 'react-router-dom'
    3. import routes from './router/router'
    4. const { Header, Sider, Content } = Layout
    5.  
    6. function App() {
    7.   let element = useRoutes(routes)
    8.   const navigate = useNavigate()
    9.  
    10.   const onClick = (e) => {
    11.     let path = e.keyPath.reverse().join('/')
    12.     navigate(path)
    13.   }
    14.   return (
    15.     <div className="App">
    16.       <Layout>
    17.         <Sider>
    18.           <Menu theme="dark" onClick={onClick} mode="inline" items={routes} />
    19.         Sider>
    20.         <Layout>
    21.           <Header style={{ background: '#ccc' }}>HeaderHeader>
    22.           <Content>{element}Content>
    23.         Layout>
    24.       Layout>
    25.     div>
    26.   )
    27. }
    28.  
    29. export default App

    效果如下

  • 相关阅读:
    3715. 最少交换次数（北京师范大学考研机试题）
    Linux内存管理（十）：unflatten_device_tree 详解
    【EC200U】GPS定位
    空心三角形
    java初探之代理模式
    赛前指导：第二届未来飞行器挑战赛实践赛道之技术详解
    猿创征文｜网络安全的十大经典工具介绍
    计算机毕业设计 SSM+Vue旅游信息平台系统 景区旅游系统 旅游咨询信息系统 旅游网址管理系统Java Vue MySQL数据库 远程调试 代码讲解
    传统的回调函数与 ES6中的promise回调以及 ES7 的async/await终极的异步同步化
    【Pandas总结】第四节 Pandas 缺失值处理（通过实例进行演示）
  • 原文地址：https://blog.csdn.net/qq_52845451/article/details/127459243