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

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

文章目录

• react-routerV6版本和V5版本的区别
  *
  –
  • react-routerV6版本和V5版本的区别
  • 详细对比：
    +
  • 1、版本的安装
  • 2、在index.js中从react-router-dom中引入 BrowserRouter或HashRouter
  • 3、将根组件包裹起来
  • 4、设置路由路径
  • 5、在app.js组件中，将路由表包裹起来
  • 6、路由重定向
  • 7，声明式导航
  • 8、编程式导航
  • 9、嵌套路由（二级路由）
  • 10、路由传参
  • 11、路由懒加载

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

• 安装V6版本

npm i react-router-dom

2、在index.js中从react-router-dom中引入 BrowserRouter或HashRouter

• V5和V6都一样

// 将引入的BrowserRouter模块取一个别名 叫做Router
import { BrowserRouter as Router } from 'react-router-dom'

3、将根组件包裹起来

• 在V5中将App根组件用Router组件包裹起来

root.render(
  <react.strictmode>
    {/* &#x5C06;App&#x7EC4;&#x4EF6;&#x7528;Router&#x5305;&#x88F9;&#x8D77;&#x6765; */}
    <router>
      <app>
    </app></router>
  </react.strictmode>
)

• 在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 (
    <router>
      <mroute>
    </mroute></router>
  )
}

4、设置路由路径

• 在V5中通过Route模块的path属性和component属性设置路径和组件的对应关系

 <route path="/home" component="{Home}"></route>
 <route path="/course" component="{Course}"></route>

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

<route path="/home" element="{<Home">}></route>
<route path="/course" element="{<Course">}></route>

5、在app.js组件中，将路由表包裹起来

• 在V5中用Switch组件将路由表包裹起来

import { Route, Switch } from 'react-router-dom'
<switch>
     <route path="/home" component="{Home}"></route>
    <route path="/course" component="{Course}"></route>
</switch>

• 在V6中用Routes组件将路由表包裹起来

import { Route, Routes } from 'react-router-dom'
<routes>
     <route path="/home" element="{<Home">}></route>
    <route path="/course" element="{<Course">}></route>
</routes>

6、路由重定向

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

• 在V6中有两种方法进行路由重定向
• React-routerV6版本中已经没有了Redirect组件，使用Navigate组件替代Redirect模块

import { Routes, Route, Navigate } from 'react-router-dom'
// Routes替代了Switch
    <routes>
      {/* element&#x66FF;&#x4EE3;&#x4E86;component */}
      <route path="/home" element="{<Home">}></route>
      <route path="/course" element="{<Course">}></route>
      {/* &#x8DEF;&#x7531;&#x91CD;&#x5B9A;&#x5411; */}
      <route path="/" element="{<Navigate" to="/home">}></route>
    </routes>

• 第二种：自定义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
}

<routes>
      {/* element&#x66FF;&#x4EE3;&#x4E86;component */}
      <route path="/home" element="{<Home">}></route>
      <route path="/course" element="{<Course">}></route>
      {/* &#x8DEF;&#x7531;&#x91CD;&#x5B9A;&#x5411; */}
      <route path="/" element="{<Redirect" to="/home">}></route>

</routes>

7，声明式导航

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

    <div id="app">
        {/* &#x8DEF;&#x7531;&#x8DF3;&#x8F6C;*/}
        <navlink activeclassname="active" to="/home"> &#x9996;&#x9875;</navlink>
        <navlink activeclassname="active" to="/course">&#x8BFE;&#x7A0B;</navlink>

        {/* &#x8DEF;&#x7531;&#x51FA;&#x53E3; */}
        <route path="/home" component="{Home}"></route>
        <route path="/course" component="{Course}"></route>
      </div>

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

<router>
      <navlink to="/home">&#x9996;&#x9875;</navlink>
      <navlink to="/course">&#x8BFE;&#x7A0B;</navlink>
      <hr>
      <mroute>
</mroute></router>

8、编程式导航

• 在V5中使用js进行跳转

export default class NotFound extends Component {
  render() {
    return (
      <div>
        <button onclick="{this.handleClick}">&#x70B9;&#x51FB;&#x53BB;&#x8BFE;&#x7A0B;</button>
        <button onclick="{()" => this.props.history.goBack()}>&#x8FD4;&#x56DE;</button>
      </div>
    )
  }
  handleClick = () => {
    console.log(this.props)
    this.props.history.push('/course')
  }
}

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 (
    <div>
      <div>Home</div>
      <button onclick="{()" => navigate('/course')}>&#x53BB;&#x8BFE;&#x7A0B;</button>
    </div>
  )
}

9、嵌套路由（二级路由）

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

//App.js
export default class App extends PureComponent {
  render() {
    return (
      <div id="app">
        {/* &#x8DEF;&#x7531;&#x8DF3;&#x8F6C;*/}
        <navlink activeclassname="active" to="/home">
          &#x9996;&#x9875;
        </navlink>
        <navlink activeclassname="active" to="/news">
          &#x65B0;&#x95FB;
        </navlink>
        <navlink activeclassname="active" to="/course">
          &#x8BFE;&#x7A0B;
        </navlink>

        <switch>
          <route path="/home" component="{Home}"></route>
          <route path="/course" component="{Course}"></route>
          <route path="/news" component="{News}"></route>
          <redirect from="/" to="/home" exact></redirect>
          <route component="{NotFound}"></route>
        </switch>
      </div>
    )
  }
}

//二级路由页面
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 (
      <div>
        <h1>Course</h1>
        <hr>
        <navlink activeclassname="active" to="/course/js">
          js&#x8BFE;&#x7A0B;
        </navlink>
        <navlink activeclassname="active" to="/course/vue">
          vue&#x8BFE;&#x7A0B;
        </navlink>
        <navlink activeclassname="active" to="/course/react">
          react&#x8BFE;&#x7A0B;
        </navlink>

        <switch>
          <route path="/course/js" component="{JsCourse}"></route>
          <route path="/course/vue" component="{VueCourse}"></route>
          <route path="/course/react" component="{ReactCourse}"></route>
          <redirect from="/course" to="/course/js"></redirect>
        </switch>
      </div>
    )
  }
}

• 在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
    <routes>
      {/* element&#x66FF;&#x4EE3;&#x4E86;component */}
      <route path="/home" element="{<Home">}></route>
      <route path="/course" element="{<Course">}>
        {/* &#x5D4C;&#x5957;&#x8DEF;&#x7531; */}
        {/* index&#x5339;&#x914D;&#x5230;&#x7684;&#x7236;&#x8DEF;&#x5F84; */}
        <route index element="{<Redirect" to="/course/js">}></route>
        <route path="js" element="{<JsCourse">}></route>
        <route path="vue" element="{<VueCourse">}></route>
        <route path="react" element="{<ReactCourse">}></route>
      </route>
      {/* &#x8DEF;&#x7531;&#x91CD;&#x5B9A;&#x5411; */}
      <route path="/" element="{<Redirect" to="/home">}></route>
      {/* 404&#x9875;&#x9762; */}
      <route path="*" element="{<NotFound">}></route>
    </routes>
  )
}

import React from 'react'

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

export default function Course() {
  return (
    <div>
      <navlink to="/course/js">js&#x8BFE;&#x7A0B;</navlink>
      <navlink to="/course/vue">vue&#x8BFE;&#x7A0B;</navlink>
      <navlink to="/course/react">react&#x8BFE;&#x7A0B;</navlink>
      <hr>
      <outlet>
    </outlet></div>
  )
}

10、路由传参

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

<route path="/details" component="{Details}"></route>

this.props.location.search.split('=')[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 <div>News{searchparams.get('id')}</div>
}

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

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

• 在V6中通过useParams 接收params传递的参数

import React from 'react'

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

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

11、路由懒加载

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

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

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

• 使用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: <redirect to="/home"></redirect>,
    },
    {
      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
}

Original: https://blog.csdn.net/idiot_MAN/article/details/127816282
Author: idiot_MAN
Title: react-routerV6版本和V5版本的详细对比