React路由v6+antd+路由鉴权

一、React路由简介

React 官方并没有提供对应的路由插件，因此，我们需要下载第三方的路由插件 —— React Router。

React Router 在 2021 年 11 月份的时候更新 v6 的版本。

二、路由配置

1、下载路由

在项目根目录中，通过以下命令

yarn add react-router-dom

2、路由配置

1）首先在react项目的入口文件index.js文件中，使用将包裹起来

import {BrowserRouter} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    
        
     
);

BrowserRouter：包裹这个应用，一个React应用只需使用一次

在 React Router 中提供了两种路由模式：hash 和 history。

对应的的路由组件分别是：

• HashRouter：hash 模式的路由
• BrowserRouter：history 模式的路由

实际使用时，任选其中一个模式引入即可

2）其次，在App.js文件中，使用设置路由出口，使用指定导航链接

import React from 'react'
import {Routes,Route} from 'react-router-dom'
import Login from './pages/Login'
import Register from './pages/Register'
import Home from './pages/Home'
export default function App() {
  return (
   
     }>
     }>
     }>
   
  )
}

核心组件作用说明

• Routes:提供一个路由出口，满足条件的路由组件会渲染到组件内部
• Route: 用于指定导航链接，完成路由跳转
  • path:path属性指定匹配的路径地址
  • element element属性指定要渲染的组件

三、路由跳转

React Router 中，路由的跳转分为两种方式：

• 标签（组件）跳转
• JS（API）跳转

1、通过Link组件跳转

import React from 'react'
import {Link} from 'react-router-dom'
export default function Login() {
  return (
    

        
用户登录
        没有账号,去注册
    
  )
}

2、编程式路由跳转

实现步骤

• 导入useNavigate钩子函数

import {useNavigate} from 'react-router-dom'

• 执行钩子函数得到跳转函数

 let navigate=useNavigate();

• 执行跳转函数完成跳转

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

export default function Register() {
  const navigate=useNavigate()
  const register=(e)=>{
    e.preventDefault()
    navigate('/login')
  }
  return (
    

        
用户注册
        {register(e)}}>已注册，去登录
    
  )
}

注意

• 如果在跳转时不想加历史记录，可以添加额外参数replace为true

 const register=(e)=>{
    e.preventDefault()
    navigate('/login',{replace:true})
  }

四、嵌套路由

1、基础配置

实现步骤

• 定义嵌套路由声明

 
     }>
     }>
     }>
       }>
       }>
     
 

• 设置二级路由出口

export default function Home() {
    return (
        <>
          

              

                  
分类管理
                  
商品管理
              
          
          

                 {/* 二级路由出口 */}
                
          
        
    )
}

2、默认二级路由设置

   }>
   }>
   }>
       {/*默认二级路由，添加index属性，删除掉path属性*/}
       }>
       }>
       }>
   

3、404页配置

应用场景：当所有的路径都没有匹配的时候显示

语法说明：在各级路由的最后添加*号路由作为兜底

    }>
    }>
    }>
       {/*默认二级路由，添加index属性，删除掉path属性*/}
       }>
       }>
       }>
     
     {/*当所有路径都没有匹配时渲染此路由*/}
     }>

五、路由传参

1、searchParams传参

实现步骤

• 传参

import {useNavigate} from 'react-router-dom'
export default function CategroyList() {
  let navigate=useNavigate();
  return (
    

        
CategroyList
        {navigate('/categroyDetail?id=12')}}>详情
    
  )
}

• 获取参数

import {useSearchParams} from 'react-router-dom'

export default function CategoryDetail() {
  let [params]=useSearchParams()
  return (
    

        
CategroyDetail
        

            ID:{params.get('id')}
        
    
  )
}

2、params传参

实现步骤

• 路由设置

 
     
        }>
           }>
         
      
 

• 传参

import {useNavigate} from 'react-router-dom'
export default function CategroyList() {
  let navigate=useNavigate();
  return (
    

        
CategroyList
        {navigate('/home/categroy-detail/13')}}>详情
    
  )
}

• 获取参数

import React from 'react'
import {useParams} from 'react-router-dom'

export default function CategoryDetail() {
  let params=useParams()
  return (
    

        
CategroyDetail
        

            ID:{params.id}
        
    
  )
}

六、集中式路由渲染

实现步骤

• 在项目根目录创建router文件夹，并在该目录下创建index.jsx
• 在router/index.jsx编写路由配置项

import Login from '../pages/Login'
import Register from '../pages/Register'
import Home from '../pages/Home'
import CategoryList from '../pages/Category'
import CategoryDetail from '../pages/Category/Detail'
import GoodsList from '../pages/Goods'
import Main from '../pages/Home/Main'
export default [
    {
        path:'/login',
        element:
    },
    {
        path:'/register',
        element:
    },
    {
        path:'/',
        element:,
        children:[
            {
                index:true,
                element:

            },
            {
                path:'/categoryList',
                element:
            },
            {
                path:'/categoryDetail/:id',
                element:
            },
            {
                path:'/goodsList',
                element:
            }
        ]
    }
]

• 在App.jsx中通过useRoutes钩子函数来进行集中式配置

import {useRoutes} from 'react-router-dom'
import router from './router/index'
function App() {
  return useRoutes(router)
}
export default App;

• 在项目根目录下的index.js中使用包裹

root.render(
    
        
    
)

七、路由懒加载

1、实现步骤

• 使用lazy(()=>import('xxx'))方式导入组件

import {lazy} from 'react'
const Login=lazy(()=>import('../pages/Login'))
const Register=lazy(()=>import('../pages/Register'))
const Home=lazy(()=>import('../pages/Home'))
const CategoryList=lazy(()=>import('../pages/Category'))
const CategoryDetail=lazy(()=>import('../pages/Category/Detail'))
const GoodsList=lazy(()=>import('../pages/Goods'))
const Main=lazy(()=>import('../pages/Home/Main'))
export default [
    {
        path:'/login',
        element:
    },
    {
        path:'/register',
        element:
    },
    {
        path:'/',
        element:,
        children:[
            {
                index:true,
                element:

            },
            {
                path:'/categoryList',
                element:
            },
            {
                path:'/categoryDetail/:id',
                element:
            },
            {
                path:'/goodsList',
                element:
            }
        ]
    }
]

• 通过 React 中提供了   组件，来实现路由的懒加载。

import {Suspense} from 'react'
function App() {
  return(
    loading}>
      {useRoutes(router)}
    
  )
}

 组件身上，必须设置一个 fallback 属性，属性值可以是一个 HTML 标签，也可以是一个自定义的组件。用于当路由组件还未加载出来前的提示。

2、解决路由闪屏

配置完路由懒加载后出现当进行路由跳转时，出现闪屏现象，要向解决这个问题可以使用 react-loadable插件进行解决

• 先下载react-loadable依赖包

yarn add react-loadable

• 建立一个loadable.js，放在src/utils/loadable.js

import Loadable from 'react-loadable';
export default function withLoadable(comp) {
    return Loadable({
     //懒加载组件页面
        loader: comp,
        loading: () => null,
        delay: "",
    })
}

• 修改router/index.js

import loadable from '../utils/loadable'
const Login=loadable(()=>import('../pages/Login'))
const Register=loadable(()=>import('../pages/Register'))
const Home=loadable(()=>import('../pages/Home'))
const CategoryList=loadable(()=>import('../pages/Category'))
const CategoryDetail=loadable(()=>import('../pages/Category/Detail'))
const GoodsList=loadable(()=>import('../pages/Goods'))
const Main=loadable(()=>import('../pages/Home/Main'))
export default [
    {
        path:'/login',
        element:
    },
    {
        path:'/register',
        element:
    },
    {
        path:'/',
        element:,
        children:[
            {
                index:true,
                element:

            },
            {
                path:'/categoryList',
                element:
            },
            {
                path:'/categoryDetail/:id',
                element:
            },
            {
                path:'/goodsList',
                element:
            }
        ]
    }
]

八、使用antd美化中后台系统

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

官网地址：Ant Design - 一套企业级 UI 设计语言和 React 组件库

1、引入antd

• 安装antd

yarn add antd

• 修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css'

• 在App.js中引入antd的组件进行测试

import React, { Component } from 'react'
import './assets/styles/index.scss';
import {Button} from 'antd'
export default class App extends Component {
  render() {
    return (
      

        App
        按钮
      
    )
  }
}

2、用户登录

• 在onFinish函数中编写登录的关键代码

import React from 'react'
import axios from 'axios'
import {useNavigate} from 'react-router-dom'
import {Form,Button, Input} from 'antd'
export default function Login() {
  const navigate=useNavigate()
  const login=async(value)=>{
    const {data:{code,data:{token}}}=await axios.post("http://www.zhaijizhe.cn:3001/users/login",value)
    if(code){
      localStorage.setItem('token',token)
      navigate("/home")
    }
  }
  return (
    
      

        账号

}           name="account"           rules={[             {               required: true,               message: '请输入账号',             }           ]}>                               密码

}           name="password"           rules={[             {               required: true,               message: '请输入密码!',             },           ]}>                                          登录                     

  ) }

在asseets/css下，新建login.css，内容如下

.login{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #001529;
    height:100vh;
}
.login .ant-form{
    width: 450px;
}

然后在assets/style/index.scss中引入login.scss

@import 'login.css';
@import '~antd/dist/antd.css'

3、后台首页布局设计

后台首页布局布局可分为三个部分，我们可以将其做成三个组件，分别是

• 头部组件
• 左侧栏组件
• 右侧内容组件

3.1、头部组件

import React from 'react'
import { Layout, Menu } from 'antd';
const { Header } = Layout
export default function MyHeader() {
    return (
        
            蜗牛商城

                             个人中心                 安全退出                           ) }  

关键代码分析

• mode:菜单的类型，horizontal表示菜单为水平菜单
• theme:表示菜单的主题颜色，这里有两种选择，可以为light亮色，或者dark为暗色

3.2、左侧栏菜单

import React from 'react'
import {Menu,Layout } from 'antd'
import { UserOutlined, LaptopOutlined, MailOutlined,UserSwitchOutlined } from '@ant-design/icons';
const { Sider } = Layout
export default function MySider() {
  return (
    
    
      } title="用户管理">
        用户列表
        添加用户
      
      } title="角色管理">
        角色列表
      
      } title="分类管理">
        分类列表
      
      } title="商品管理">
        商品列表
        添加商品
      
    
   
  )
}

3.3、右侧内容区域

import React from 'react'
import { Layout,Breadcrumb } from 'antd'
const {Content} = Layout
export default function MyContent() {
    return (
        
            
                首页
                用户管理
                用户列表
            
            
                Content
            
        
    )
}

在Home组件中引入这三个组件，如下

import React from 'react'
import MyHeader from './MyHeader';
import MySider from './MySider';
import MyContent from './MyContent';
import { Layout } from 'antd'
export default function Home() {
  return (
    
     
      
        
        
      
    
  )
}

4、完成安全退出功能

import React from 'react'
import { Layout, Menu,Popconfirm} from 'antd';
import {useNavigate} from 'react-router-dom'
const { Header } = Layout
export default function MyHeader() {
    const navigate=useNavigate()
    const logout=()=>{
        localStorage.removeItem('token');
        navigate('/login',{replace:true})
    }
    return (
        
            蜗牛商城