• React-RouterV6版本的使用

    文章目录

    React-RouterV6

    https://reactrouter.com/en/main/components/routes

    简介

    • react-router :核心模块‘ react路由的大部分的核心功能，包括路由匹配算法和大部分的核心组件和钩子

    • react-router-dom React组件中用于路由的软件包，包括react-router的所有内容，还添加了一些特定的Dom的api

    • react-router-native 开发reactNavite应用，包括react-router的所有内容，添加了一些react-native的api

    react-routerV6版本和V5版本的区别
    • 包大小的不同 V5 大小在20.8k左右，压缩后在7.3k左右；V6 大小在10.8k左右，压缩后在3.8k左右
    • Route 特性变更
      • path 当前页面对应的URL地址
      • element 路由匹配时，渲染哪个组件 ；替代了V5里的component和render
    • Routes替代了Switch
    • 嵌套路由更简单
    • useNavigate替代了useHistory
    • 移除了activeClassName
    • 钩子useRoutes替代了react-router-config
    路由使用

    • 路由表配置

      src/router/index.js

      import React from 'react'

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

import Home from '../Home'
import Course from '../Course'

export default function MRoute() {
  return (
    // Routes替代了Switch
    
      {/* element替代了component */}
      }>
      }>
    
  )
}


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18

    • 路由视图

      App.js

      import React from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
// 引入路由表
import MRoute from './router'

export default function App() {
  return (
    
      
    
  )
}


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
    路由重定向

    React-routerV6版本中已经没有了Redirect组件

    • 第一种：使用Navigate组件替代

      src/router/index.js

      import React from 'react'

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

import Home from '../Home'
import Course from '../Course'

export default function MRoute() {
  return (
    // Routes替代了Switch
    
      {/* element替代了component */}
      }>
      }>
      {/* 路由重定向 */}
      }>
    
  )
}


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20

    • 第二种：自定义Redirect组件

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

export default function Redirect(props) {
  const navigate = useNavigate()
  useEffect(() => {
    // replace: true 代表的是要替换掉之前的页面
    navigate(props.to, { replace: true })
  })
  return null
}


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      
      {/* element替代了component */}
      }>
      }>
      {/* 路由重定向 */}
      }>
    

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    • 404页面

      
      {/* element替代了component */}
      }>
      }>
      {/* 路由重定向 */}
      }>
      {/* 404页面 */}
      }>


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
    声明式导航和编程式导航

    • 声明式导航

      
      首页
      课程
      
      
      
          

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

    NavLink组件会自动给当前的匹配到的路由NavLink添加一个class名为active，要实现高亮效果设置active样式

    ​ 自定义class名

    
       (isActive ? 'my-active' : '')}
      >
        首页
      
       (isActive ? 'my-active' : '')}
      >
        课程
      
      
    
     
     

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    NavLink有一个属性className，它接收一个函数，该函数的参数是一个对象，里面有一个属性isActive，

    我们可以根据这个属性的值是否为true来判断是否添加class名

    • 编程式导航

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

export default function Home() {
  // 使用useNavigate这个钩子 可以通过js的方式实现跳转
  const navigate = useNavigate()
  return (
    
      
      
      Home
      
      
    
      
  )
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
    嵌套路由

    • 基本配置

      import React from 'react'

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

import Home from '../Home'
import Course from '../Course'

import Redirect from '../Redirect'
import NotFound from '../NotFound'

import JsCourse from '../JsCourse'
import VueCourse from '../VueCourse'
import ReactCourse from '../ReactCourse'

export default function MRoute() {
  return (
    // Routes替代了Switch
    
      {/* element替代了component */}
      }>
      }>
        {/* 嵌套路由 */}
        {/* index匹配到的父路径 */}
        }>
        }>
        }>
        }>
      
      {/* 路由重定向 */}
      }>
      {/* 404页面 */}
      }>
    
  )
}


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36

    • 通过Outlet组件实现嵌套路由的视图显示

      import React from 'react'

import { NavLink, Outlet } from 'react-router-dom'

export default function Course() {
  return (
    
      
      js课程
      vue课程
      react课程
      
      
      
    
      
  )
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
    动态路由

    • query形式传参

      export default function Home() {
// 使用useNavigate这个钩子 可以通过js的方式实现跳转
const navigate = useNavigate()
return (

  
      
    
      Home
      
    
    {/* 新闻 */}
    军事新闻
    体育e新闻
    娱乐新闻
  
      

  )
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
    //路由配置

      {/* element替代了component */}
      }>
      }>
        {/* 嵌套路由 */}
        {/* index匹配到的父路径 */}
        }>
        }>
        }>
        }>
      
      {/* 新闻 */}
      }>
      {/* 路由重定向 */}
      }>
      {/* 404页面 */}
      }>
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    //News.js  获取参数
import React from 'react'
import { useSearchParams } from 'react-router-dom'

export default function News() {
  // 通过useSearchParams钩子函数来获取query形式的参数
  const [searchparams, setSearchParams] = useSearchParams()
  return 
    News{searchparams.get('id')}
    
}

/* 
searchparams.get('id')  获取路由参数的值
searchparams.has('id')  判断参数是否存在

setSearchParams({'id':45}) 在当前页面修改路由参数的值
*/

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • params形式传参
    import React from 'react'

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

export default function NewsDetail() {
  // 通过useParams 接收params传递的参数
  const params = useParams()
  return 
    NewsDetail{params.id}
    
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    
      {/* element替代了component */}
      }>
      }>
        {/* 嵌套路由 */}
        {/* index匹配到的父路径 */}
        }>
        }>
        }>
        }>
      
      {/* 新闻 */}
      }>
      {/* params形式 */}
      }>
      {/* 路由重定向 */}
      }>
      {/* 404页面 */}
      }>
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
     {/* params形式传参 */}
      军事新闻
      体育e新闻
      娱乐新闻

    • 1
    • 2
    • 3
    • 4
    路由拦截

    • 路由拦截组件封装

      //AuthComponent.js
import React from 'react'
import Redirect from './Redirect'

export default function AuthComponent(props) {
  // 获取当前组件
  const Comp = props.children.type
  return localStorage.getItem('token') ?  : 
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

    • 配置登录拦截

       
      {/* element替代了component */}
      
            
          
        }
      >
      }>
      {/* params形式 */}
      }>
      {/* 路由重定向 */}
      }>
      {/* 404页面 */}
      }>
    

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18

    • 登录功能

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

export default function Login() {
  const navigate = useNavigate()
  const login = () => {
    localStorage.setItem('token', '112222')
    navigate('/home')
  }
  return (
    
      
      
    
      
  )
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
    路由懒加载
    import React, { Suspense } from 'react'

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

// 通过React.lazy函数配合import 函数实现按需导入模块
const Home = React.lazy(() => import('../Home'))
const Course = React.lazy(() => import('../Course'))
const Login = React.lazy(() => import('../Login'))
const News = React.lazy(() => import('../News'))
const NewsDetail = React.lazy(() => import('../NewsDetail'))
const Redirect = React.lazy(() => import('../Redirect'))
const NotFound = React.lazy(() => import('../NotFound'))
const JsCourse = React.lazy(() => import('../JsCourse'))
const VueCourse = React.lazy(() => import('../VueCourse'))
const ReactCourse = React.lazy(() => import('../ReactCourse'))
const AuthComponent = React.lazy(() => import('../AuthComponent'))

export default function MRoute() {
  return (
    // 使用Suspense组件包裹所有路由表
    
      // Routes替代了Switch
      
        {/* element替代了component */}
        
              
            
          }
        >
        }>
          {/* 嵌套路由 */}
          {/* index匹配到的父路径 */}
          }>
          }>
          }>
          }>
        
        {/* 新闻 */}
        }>
        }>
        {/* params形式 */}
        }
        >
        {/* 路由重定向 */}
        }>
        {/* 404页面 */}
        }>
      
    
  )
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    useRoutes钩子配置路由

    • 路由懒加载组件封装

      import React, { lazy, Suspense } from 'react'

export default function LazyLoad(path) {
  const Element = lazy(() => import(`./${path}`))
  return (
    
      
    
  )
}


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11

    • 使用useRoutes钩子将路由转成配置文件

      import React, { Suspense } from 'react'
import { useRoutes } from 'react-router-dom'
import LazyLoad from '../LazyLoad'
import Redirect from '../Redirect'

export default function MRoute() {
  const element = useRoutes([
    {
      path: '/',
      element: ,
    },
    {
      path: '/home',
      element: LazyLoad('Home'),
    },
    {
      path: '/course',
      element: LazyLoad('Course'),

      children: [
        {
          path: 'js',
          element: LazyLoad('JsCourse'),
        },
        {
          path: 'vue',
          element: LazyLoad('VueCourse'),
        },
        {
          path: 'react',
          element: LazyLoad('ReactCourse'),
        },
        {
          path: '',
          element: ,
        },
      ],
    },
    {
      path: '/news',
      element: LazyLoad('News'),
    },
    {
      path: '/newsdetail/:id',
      element: LazyLoad('NewsDetail'),
    },
    { path: '*', element: LazyLoad('NotFound') },
  ])

  return element
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
  • 相关阅读:
    手搓一个“七夕限定”，用3D Engine 5分钟实现烟花绽放效果
    ctfshow-web-红包题 辟邪剑谱
    数据中心网络设计方案,数据中心网络解决方案
    02_RabbitMQ入门及安装
    VUE+VScode+elementUI开发环境
    shell变量
    k8s-hpa控制器 16
    使用SSM搭建图书商城管理系统（完整过程介绍、售后服务哈哈哈）
    【python基础】时间模块的time的下面的方法使用解析
    JoySSL-新兴国产品牌数字证书
  • 原文地址：https://blog.csdn.net/idiot_MAN/article/details/127814275