• react-routerV6版本和V5版本的详细对比

    react-routerV6版本和V5版本的区别

    文章目录

    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

    详细对比：

    1、版本的安装
    • 安装V5版本
    npm i react-router-dom@5

    • 1
    • 安装V6版本
    npm i react-router-dom

    • 1
    2、在index.js中从react-router-dom中引入 BrowserRouter或HashRouter
    • V5和V6都一样
    // 将引入的BrowserRouter模块取一个别名 叫做Router
import { BrowserRouter as Router } from 'react-router-dom'

    • 1
    • 2
    3、将根组件包裹起来
    • 在V5中将App根组件用Router组件包裹起来
    root.render(
  
    {/* 将App组件用Router包裹起来 */}
    
      
    
  
)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 在V6中要先引入MRoute 代替App根组件 Router组件包裹起来
    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
    4、设置路由路径
    • 在V5中通过Route模块的path属性和component属性设置路径和组件的对应关系
     
 

    • 1
    • 2
    • 在V6中通过Route模块的path属性和element属性设置路径和组件的对应关系
    }>
}>

    • 1
    • 2
    5、在app.js组件中，将路由表包裹起来
    • 在V5中用Switch组件将路由表包裹起来
    import { Route, Switch } from 'react-router-dom'

	 
 	


    • 1
    • 2
    • 3
    • 4
    • 5
    • 在V6中用Routes组件将路由表包裹起来
    import { Route, Routes } from 'react-router-dom'

	 }>
	}>


    • 1
    • 2
    • 3
    • 4
    • 5
    6、路由重定向

    在V5中我们希望一进入页面就可以访问到/home页面，使用Redirect模块

    • 在V6中有两种方法进行路由重定向

      • React-routerV6版本中已经没有了Redirect组件，使用Navigate组件替代Redirect模块

        import { Routes, Route, Navigate } from 'react-router-dom'
// Routes替代了Switch
    
      {/* element替代了component */}
      }>
      }>
      {/* 路由重定向 */}
      }>
    

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

      • 第二种：自定义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
        • 8
    7，声明式导航

    • 在V5中当我们希望给当前的路由添加一个样式的时候，我们可以使用NavLink模块来代替Link模块，给NavLink添加activeClassName属性，属性名为class名，在样式中定义active样式

          
      
        {/* 路由跳转*/}
         首页
        课程

        {/* 路由出口 */}
        
        
      
      

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

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

      
      首页
      课程
      
      
      
      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
    8、编程式导航

    • 在V5中使用js进行跳转

      export default class NotFound extends Component {
  render() {
    return (
      
      
        
        
      
      
    )
  }
  handleClick = () => {
    console.log(this.props)
    this.props.history.push('/course')
  }
}

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

      history对象的常用方法

      • push路由跳转，push里面传递的参数和NavLink中的to属性的参数是一样的
      • go(num) 前进或后退num级
      • goBack() go(-1) 后退一级
      • goForward() go(1) 前进一级

    • 在V6中使用useNavigate这个钩子 可以通过js的方式实现跳转

      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
    9、嵌套路由（二级路由）

    • 在V5中需要在那个路由下面嵌套路由，就直接去所需嵌套路由的路由页面里面去创建所需要的路由

      //App.js
export default class App extends PureComponent {
  render() {
    return (
      
      
        {/* 路由跳转*/}
        
          首页
        
        
          新闻
        
        
          课程
        

        
          
          
          
          
          
        
      
      
    )
  }
}

      • 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
      //二级路由页面
import { Component } from 'react'
import { NavLink, Redirect, Route, Switch } from 'react-router-dom'
import JsCourse from './course/JsCourse'
import VueCourse from './course/VueCourse'
import ReactCourse from './course/ReactCourse'
export default class Course extends Component {
  render() {
    return (
      
      
        
      Course
      
        
      
        
          js课程
        
        
          vue课程
        
        
          react课程
        

        
          
          
          
          
        
      
      
    )
  }
}


      • 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

    • 在V6中需要在那个路由下面嵌套路由，就直接在该路由里面直接写路由组件直接写所需要嵌套的路由，在二级路由里面通过Outlet组件实现嵌套路由的视图显示

      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
      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
    10、路由传参

    • query形式传参

      • 在V5中query方式传递的参数不需要在注册路由的时候声明

        

        • 1
        this.props.location.search.split('=')[1]

        • 1

      • 在V6中通过useSearchParams钩子函数来获取query形式的参数

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

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

        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')}
        
}


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

    • params方式

      • 在V5中 在组件中获取params方式传递参数

         const { id } = this.props.match.params

        • 1

      • 在V6中通过useParams 接收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
    11、路由懒加载

    • 在V6中增加了useRoutes钩子将路由转成配置文件

      • LazyLoad组件封装
      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

      • 使用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: '/course',
      element: LazyLoad('Course'),
      children: [
        {
          path: 'js',
          element: LazyLoad('JsCourse'),
        },
       ......
      ],
    },
    {
      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
  • 相关阅读:
    分布式系统中的领导选举
    数据湖在爱奇艺数据中台的应用
    AOP的点点滴滴
    springboot微服务学习（一）MyBatis-plus梳理
    JavaScript 中的BOM对象
    XPS测试加测轨道-科学指南针
    Java反射实体组装SQL
    QT 自定义信号和槽 学习笔记
    面试官：Mybatis中 Dao接口和XML文件的SQL如何建立关联？
    121. 买卖股票的最佳时机 --力扣 --JAVA
  • 原文地址：https://blog.csdn.net/idiot_MAN/article/details/127816282