devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：花生_TL007 | 2024-02-19 06:33:22

赞

踩

react浮动侧边栏

目录

声明式方式

编程式方式

最终版本

声明式方式

目录结构是这个样子的

首先，需要安装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' }}>Header</Header>
  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' }}>Header</Header>
  22.           <Content>{element}</Content>
  23.         </Layout>
  24.       </Layout>
  25.     </div>
  26.   )
  27. }
  28.  
  29. export default App

效果如下

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/113136
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号