您现在的位置是：首页 > 技术教程正文

react ant-design实现导航菜单menu的路由设置/切换页面

admin 阅读： 2024-03-28

后台-插件-广告管理-内容页头部广告（手机）

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 }}>记账管家</span> </div> "dark" defaultSelectedKeys={['1']} mode="inline" items={items} onClick={onClick} /> </Sider> "site-layout">

{{ padding: 0, paddingLeft: 30, background: colorBgContainer, }} >123</Header> {{ margin: '0 16px', }} > {{ margin: '16px 0', }} > {/* .Item>User</Breadcrumb.Item> .Item>Bill</Breadcrumb.Item> */} </Breadcrumb>

{{ padding: 24, minHeight: '75vh', background: colorBgContainer, }} > "/home" element={/>} /> "/charts" element={/>} /> </Routes> </div> </Content>

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）