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

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 (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        
          
          {{ marginLeft: 15 }}>记账管家
        
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} onClick={onClick} />
      
      
        <Header
          style={{
            padding: 0,
            paddingLeft: 30,
            background: colorBgContainer,
          }}
        >123
        <Content
          style={{
            margin: '0 16px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
          >
            {/* User
            Bill */}
          
          {
              padding: 24,
              minHeight: '75vh',
              background: colorBgContainer,
            }}
          >
            
              <Route exact path="/home" element={} />
              <Route exact path="/charts" element={} />
            
          
        
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©2018 Created by Ant UED
        
      
    
  );
};
export default App;

讲解：

首先，给导航菜单的menu添加点击事件

在这里插入图片描述

修改item，通过设置点击事件获取点击后的key值（key值即路由跳转的页面）

在这里插入图片描述

打印出来看看

在这里插入图片描述

获取到的key值就可以使用路由的useNavigate进行页面跳转了

导入路由

import { useNavigate, Routes, Route } from 'react-router-dom'

设置点击事件跳转

在这里插入图片描述

最后，设置页面路由出口（这里根据自己的需求设置对应的页面路由出口）

在这里插入图片描述

注意点：

如果出现报下面的错误，就是useNavigate是要在组件内才能使用，把对应的页面组件用包裹起来

在这里插入图片描述

其中，我的导航菜单是写在App.js里面的，所以我的App组件包裹就是在index.js里面

在这里插入图片描述

这样就算完成了页面的路由设置。

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/f92a0525ce.html

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

讲解：

首先，给导航菜单的menu添加点击事件

修改item，通过设置点击事件获取点击后的key值（key值即路由跳转的页面）

打印出来看看

获取到的key值就可以使用路由的useNavigate进行页面跳转了

导入路由

设置点击事件跳转

最后，设置页面路由出口（这里根据自己的需求设置对应的页面路由出口）

注意点：

相关推荐