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

• 安装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>
    {/* 将App组件用Router包裹起来 */}
    <Router>
      <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 />
    </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替代了component */}
          <Route path="/home" element={<Home />}></Route>
          <Route path="/course" element={<Course />}></Route>
          {/* 路由重定向 */}
          <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替代了component */}
          <Route path="/home" element={<Home />}></Route>
          <Route path="/course" element={<Course />}></Route>
          {/* 路由重定向 */}
          <Route path="/" element={<Redirect to="/home" />}></Route>
    
    </Routes>
    

7，声明式导航

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

      <div id="app">
          {/* 路由跳转*/}
          <NavLink activeClassName="active" to="/home"> 首页</NavLink>
          <NavLink activeClassName="active" to="/course">课程</NavLink>
  
          {/* 路由出口 */}
          <Route path="/home" component={Home}></Route>
          <Route path="/course" component={Course}></Route>
        </div>
  

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

  <Router>
        <NavLink to="/home">首页</NavLink>
        <NavLink to="/course">课程</NavLink>
        <hr />
        <MRoute />
  </Router>
  

8、编程式导航

• 在V5中使用js进行跳转

  export default class NotFound extends Component {
    render() {
      return (
        <div>
          <button onClick={this.handleClick}>点击去课程</button>
          <button onClick={() => this.props.history.goBack()}>返回</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')}>去课程</button>
      </div>
    )
  }
  

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

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

  //App.js
  export default class App extends PureComponent {
    render() {
      return (
        <div id="app">
          {/* 路由跳转*/}
          <NavLink activeClassName="active" to="/home">
            首页
          </NavLink>
          <NavLink activeClassName="active" to="/news">
            新闻
          </NavLink>
          <NavLink activeClassName="active" to="/course">
            课程
          </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课程
          </NavLink>
          <NavLink activeClassName="active" to="/course/vue">
            vue课程
          </NavLink>
          <NavLink activeClassName="active" to="/course/react">
            react课程
          </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替代了component */}
        <Route path="/home" element={<Home />}></Route>
        <Route path="/course" element={<Course />}>
          {/* 嵌套路由 */}
          {/* index匹配到的父路径 */}
          <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>
        {/* 路由重定向 */}
        <Route path="/" element={<Redirect to="/home" />}></Route>
        {/* 404页面 */}
        <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课程</NavLink>
        <NavLink to="/course/vue">vue课程</NavLink>
        <NavLink to="/course/react">react课程</NavLink>
        <hr />
        <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 />
      </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
    }