react-routerV6版本和V5版本的區(qū)別

• 包大小的不同 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屬性設置路徑和組件的對應關(guān)系

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

• 在V6中通過Route模塊的path屬性和element屬性設置路徑和組件的對應關(guān)系

<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版本中已經(jīng)沒有了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">
          {/* 路由跳轉(zhuǎn)*/}
          <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，要實現(xiàn)高亮效果設置active樣式

  <Router>
        <NavLink to="/home">首頁</NavLink>
        <NavLink to="/course">課程</NavLink>
        <hr />
        <MRoute />
  </Router>

8、編程式導航

• 在V5中使用js進行跳轉(zhuǎn)

  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路由跳轉(zhuǎn)，push里面?zhèn)鬟f的參數(shù)和NavLink中的to屬性的參數(shù)是一樣的
  • go(num) 前進或后退num級
  • goBack() go(-1) 后退一級
  • goForward() go(1) 前進一級

• 在V6中使用useNavigate這個鉤子 可以通過js的方式實現(xiàn)跳轉(zhuǎn)

  import React from 'react'
  import { useNavigate } from 'react-router-dom'
  
  export default function Home() {
    // 使用useNavigate這個鉤子 可以通過js的方式實現(xiàn)跳轉(zhuǎn)
    const navigate = useNavigate()
    return (
      <div>
        <div>Home</div>
        <button onClick={() => navigate('/course')}>去課程</button>
      </div>
    )
  }
  

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

• 在V5中需要在那個路由下面嵌套路由，就直接去所需嵌套路由的路由頁面里面去創(chuàng)建所需要的路由

  //App.js
  export default class App extends PureComponent {
    render() {
      return (
        <div id="app">
          {/* 路由跳轉(zhuǎn)*/}
          <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組件實現(xiàn)嵌套路由的視圖顯示

  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方式傳遞的參數(shù)不需要在注冊路由的時候聲明

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

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

  • 在V6中通過useSearchParams鉤子函數(shù)來獲取query形式的參數(shù)

    searchparams.get(‘id’) 獲取路由參數(shù)的值
    searchparams.has(‘id’) 判斷參數(shù)是否存在

    setSearchParams({‘id’:45}) 在當前頁面修改路由參數(shù)的值

    import React from 'react'
    import { useSearchParams } from 'react-router-dom'
    
    export default function News() {
      // 通過useSearchParams鉤子函數(shù)來獲取query形式的參數(shù)
      const [searchparams, setSearchParams] = useSearchParams()
      return <div>News{searchparams.get('id')}</div>
    }
    
    

• params方式

  • 在V5中 在組件中獲取params方式傳遞參數(shù)

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

  • 在V6中通過useParams 接收params傳遞的參數(shù)

    import React from 'react'
    
    import { useParams } from 'react-router-dom'
    
    export default function NewsDetail() {
      // 通過useParams 接收params傳遞的參數(shù)
      const params = useParams()
      return <div>NewsDetail{params.id}</div>
    }
    

11、路由懶加載

• 在V6中增加了useRoutes鉤子將路由轉(zhuǎn)成配置文件

  • LazyLoad組件封裝

  import React, { lazy, Suspense } from 'react'
  
  export default function LazyLoad(path) {
    const Element = lazy(() => import(`./${path}`))
    return (
      <Suspense>
        <Element />
      </Suspense>
    )
  }
  

  • 使用useRoutes鉤子將路由轉(zhuǎn)成配置文件

    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
    }

到此這篇關(guān)于react-routerV6版本和V5版本的詳細對比的文章就介紹到這了,更多相關(guān)react-router版本對比內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評論