官网地址：react-router

1.安装的版本，antd版本4.24.1

2.项目目录结构

3.入口文件index.js配置，react18版本发生了一些变化，改为以下写法

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './app';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

4.Routes组件替换了v5版的Switch组件

router.js

import React, { lazy } from 'react';

const Goods = lazy(() =>
    import( /* webpackChunkName: "Goods"*/ 'pages/goods')
);
const List = lazy(() =>
    import( /* webpackChunkName: "List"*/ 'pages/list')
);
const router = [
    {
        path: '/home/goods',
        component: Goods,
        name: '关于'
    },
    {
        path: '/home/list',
        component: List,
        name: '列表页'
    },
]

export default router;

app.js

import { ConfigProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import routerConfig from 'routerConfig';
import Login from 'pages/login';
import Home from 'pages/home';

import './App.less';

export default function App() {
    const HomeIndex = routerConfig[0]?.component;

    return (
        <ConfigProvider locale={zh_CN}>
            <HashRouter>
                {/* react-router-dom v6 使用“Routes”代替“Switch”  */}
                <Suspense fallback={<div>loading</div>}>
                    <Routes>
                        <Route path="/"  element={<Login/>}/>
                        <Route path="/home"  element={<Home/>}>
                            {/* 二级路由 */}
                            <Route index element={<HomeIndex/>}/>
                            {
                                routerConfig.map(item=>{
                                    return (
                                        <Route path={item.path}  key={item.path} element={<item.component/>} />
                                    )
                                })
                            }
                        </Route>
                        <Route path="*"  element={<Login/>}/>
                    </Routes>
                </Suspense>
            </HashRouter>
       </ConfigProvider>
    );
}

5.跳转方式用useNavigate方法或者使用NavLink和Link

useNavigate方法使用，只能在函数组件中使用

import React from 'react';
import {  useNavigate } from "react-router-dom";

const Home = (props) => {
    const navigate = useNavigate();
    const navClick = () => {
        //路由跳转
        navigate('/home');
        //history 的replace模式
        // navigate('/home',{ replace: true })
    };
    return(
        <div onOnclick={navClick}>页面跳转</div>
    )
}

NavLink的使用

<NavLink to='/home'>首页</NavLink>

6.antd配置home页

Outlet把二级路由的页面内容显示到这里，相当于vue的router-view 
import React, { useState, Suspense, useEffect } from 'react';
import { UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import { Routes, Route, useNavigate, Outlet, NavLink } from "react-router-dom";
import routerConfig from 'routerConfig';

import About from '../goods';
import List from '../list';

import './index.less';

const { Header, Sider, Content } = Layout;

const Home = (props) => {
    const [collapsed, setCollapsed] = useState(false);  

    const navigate = useNavigate();
    const navClick = (e) => {
        //路由跳转
        navigate(e.key)
    };
    
    return( 
    <Layout className='home-main'>
        <Sider trigger={null} collapsible collapsed={collapsed}>
            <div className="title"> 框架构建demo </div>
            <Menu
                className='menu'
                theme="dark"
                mode="inline"
                defaultSelectedKeys={['/home/goods']}
                onClick={navClick}
                items={[
                    {
                        key: '/home/goods',
                        icon: <UserOutlined />,
                        label: "商品"
                    },
                    {
                        key: '/home/list',
                        icon: <VideoCameraOutlined />,
                        label: "列表"
                    }
                ]}
            />
        </Sider>
        <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }}></Header>
            <Content
                className="site-layout-background"
                style={{
                    margin: '24px 16px',
                    padding: 24,
                    minHeight: 280,
                }}
            >
                <Suspense fallback={<div>loading</div>}>
                    {/* Outlet相当于vue的router-view */}
                    <Outlet/>
                </Suspense>
            </Content>
        </Layout>
    </Layout>
    )
};

export default Home;

到这里基本配置就完成了。

原文地址：http://www.cnblogs.com/zimengxiyu/p/16886331.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性