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
    }

到此这篇关于react-routerV6版本和V5版本的详细对比的文章就介绍到这了,更多相关react-router版本对比内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

最新评论