欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react-router-dom6(對比?router5)快速入門指南

 更新時間：2022年08月10日 15:05:46   作者：codeMak1r.小新  
這篇文章主要介紹了快速上手react-router-dom6（對比?router5）,通過本文學(xué)習(xí)最新的react-router-dom?v6版本的路由知識，并且會與v5老版本進行一些對比，需要的朋友可以參考下

React Router 6 快速上手

在之前的文章中，我們已經(jīng)學(xué)習(xí)了react-router-dom v5的內(nèi)容，在react-router-dom v6版本中，對舊版本的API以及一些組件做了些許修改。本文開始，我將帶大家學(xué)習(xí)最新的react-router-dom v6版本的路由知識，并且會與v5老版本進行一些對比。

需要學(xué)習(xí)react-router-dom v5版本的可以點擊：

react-router-dom入門

react-router-dom入門2

1.概述

  1. React Router 以三個不同的包發(fā)布到npm上，它們分別為：
    1. react-router：路由的核心庫，提供了很多的：組件、鉤子
    2. react-router-dom：包含react-router所有內(nèi)容，并添加了一些專門用于DOM的組件，例如<BrowserRouter>等
    3. react-router-native：包括react-router所有內(nèi)容，并添加一些專門用于ReactNative的API，例如<NativeRouter>等
  2. 與React Router 5.x版本相比，改變了什么？
    1. 內(nèi)置組件的變化：移除<Switch />，新增<Routes />等
    2. 語法的變化：component={About}變?yōu)?code>element={<About />}等
    3. 新增多個hook：useParams、useNavigate、useMatch等
    4. 官方明確推薦函數(shù)式組件！

2.基本使用

我們還是使用之前講解react-router-dom@5的示例。

import React, { Fragment } from 'react'
import { NavLink, Routes, Route } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
  return (
    <Fragment>
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>React Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
    					 // 編寫路由鏈接
              <NavLink className='list-group-item' to="/home">Home</NavLink >
              <NavLink className='list-group-item' to="/about">About</NavLink >
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注冊路由 */}
                <Routes>
                  <Route path='/about' element={<About />} />
                  <Route path='/home' element={<Home />} />
                </Routes>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  )
}

注意??，在v6版本中，依舊需要將外層App組件用 < B r o w s e r R o u t e r > <BrowserRouter> <BrowserRouter>標簽包裹起來。

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
 <BrowserRouter>
   <App />
 </BrowserRouter>
</React.StrictMode>,
);

3.重定向

在react-router-dom v5版本中，我們是使用Redirect進行重定向的，但是在新版本中呢，刪除了Redirect，換成了另一個叫做：Navigate。

// 重定向
// react-router-dom v5
<Redirect to="/home" />
// react-router-dom v6
<Route path='/' element={<Navigate to="/home" />} />

值得注意的是，Navigate組件接收兩個屬性，一個是上面提到的to屬性，另一個屬性是replace。

<Navigate to="/about" replace />

我們知道，路由的跳轉(zhuǎn)有兩種模式，一種是push，push會將這個url壓入路由history棧頂； 而replace模式會將棧頂?shù)膗rl替換 。

Navigate組件中可以設(shè)置replace的值為true或者false，默認為false，也就是重定向默認是push模式跳轉(zhuǎn)。

4.NavLink高亮

高亮樣式

.LinkBackColor {
  background-color: orange !important;
  color: white !important;
}

修改高亮之前

在這里插入圖片描述

修改高亮之后

在這里插入圖片描述

react-router-dom v5中，實現(xiàn)NavLink高亮使用的是NavLink組件標簽中的activeClassName屬性。

<NavLink activeClassName='LinkBackColor' className="list-group-item" to="/about">About</NavLink>

但是在新版本v6中，我們?nèi)绻雽崿F(xiàn)NavLink高亮效果，需要將className屬性設(shè)置為一個函數(shù)。

<NavLink className={
   ({ isActive }) => { return isActive ? "list-group-item LinkBackColor" : "list-group-item" }
} to="/about">About</NavLink >

代碼優(yōu)化

將計算className的值封裝成一個函數(shù)

function computedClassName({ isActive }) {
  return isActive ? "list-group-item LinkBackColor" : "list-group-item"
}

<NavLink className={computedClassName} to="/home">Home</NavLink >

5.useRoutes路由表

在Vue中，Vue CLI腳手架搭建完畢之后，項目目錄中就會有一個router文件夾，里面就是用來存放路由表的。

在react-router-dom v6版本中，也可以很輕松的把路由都中心化地維護在路由表中了。

src結(jié)構(gòu)
├─App.jsx
├─index.js
├─routes
|   └index.js
├─pages
|   ├─About.jsx
|   └Home.jsx

/routes/index.js

import { Navigate } from "react-router-dom"
import About from "../pages/About"
import Home from "../pages/Home"

export default [
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/',
    element: <Navigate to="/about" />
  }
]

使用路由表

import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes'

// 根據(jù)路由表生成對應(yīng)的路由規(guī)則
const element = useRoutes(routes)

// 注冊路由
+ {element}
- <Routes>
-  <Route path='/about' element={<About />} />
-  <Route path='/home' element={<Home />} />
-  <Route path='/' element={<Navigate to="/about" />} />
- </Routes>

6.嵌套路由（Outlet）

在這里插入圖片描述

如圖所示，Message與News都是Home組件下的子路由組件，這里的/home/message與/home/news就發(fā)生了路由的嵌套。

我們還是使用路由表來統(tǒng)一維護路由組件。

首先修改路由表：

{
  path: '/home',
  element: <Home />,
  children: [
    {
      path: 'message',
      element: <Message />
    },
    {
      path: 'news',
      element: <News />
    }
  ]
},

將嵌套的二級路由放在children屬性中注冊，這一點與Vue類似。

Home組件：

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

export default function Home() {
  return (
    <div>
      <h2>Home組件內(nèi)容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <NavLink className='list-group-item' to='news'>News</NavLink>
          </li>
          <li>
            <NavLink className='list-group-item' to='message'>Message</NavLink>
          </li>
        </ul>
        {/* 指定路由組件呈現(xiàn)的位置 */}
        <Outlet />
      </div>
    </div>
  )
}

<NavLink className='list-group-item' to='news'>News</NavLink>
中的to屬性有三種寫法：
1. to='news'
2. to='./news'
3. to='/home/news'  //這一種與react-router-dom5中一樣

Outlet組件用于指定嵌套路由組件呈現(xiàn)的位置，詳細的說明會在后續(xù)專欄文章《總結(jié)路由API》中提到。

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

相關(guān)文章

  • 淺析React 對state的理解

    淺析React 對state的理解

    state狀態(tài)是組件實例對象身上的狀態(tài)，不是組件類本身身上的，是由這個類締造的實例身上的。這篇文章主要介紹了React 對state的理解,需要的朋友可以參考下
    2021-09-09
  • React實現(xiàn)多個場景下鼠標跟隨提示框詳解

    React實現(xiàn)多個場景下鼠標跟隨提示框詳解

    這篇文章主要為大家介紹了React實現(xiàn)多個場景下鼠標跟隨提示框詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-09-09
  • react-redux的connect示例詳解

    react-redux的connect示例詳解

    connect()是react-redux中的核心方法之一，它將react組件預(yù)redux中的Store真正連接在一起，這篇文章主要介紹了react-redux的connect詳解,需要的朋友可以參考下
    2023-01-01
  • 六分鐘帶你快速學(xué)會react中的useMemo

    六分鐘帶你快速學(xué)會react中的useMemo

    簡單說React.memo()是通過校驗props中的數(shù)據(jù)是否改變的來決定組件是否需要重新渲染的一種緩存技術(shù),下面這篇文章主要給大家介紹了關(guān)于如何快速學(xué)會react中useMemo的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • React反向代理與CSS模塊化的使用案例

    React反向代理與CSS模塊化的使用案例

    這篇文章主要介紹了React反向代理與CSS模塊化的使用案例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-02-02
  • React實現(xiàn)表格選取

    React實現(xiàn)表格選取

    這篇文章主要為大家詳細介紹了React實現(xiàn)表格選取，類似于Excel選中一片區(qū)域并獲得選中區(qū)域的所有數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-08-08
  • 在react中使用highlight.js將頁面上的代碼高亮的方法

    在react中使用highlight.js將頁面上的代碼高亮的方法

    本文通過 highlight.js 庫實現(xiàn)對文章正文 HTML 中的代碼元素自動添加語法高亮，具有一定的參考價值，感興趣的可以了解一下
    2022-01-01
  • react-router-domV6版本改版踩坑記錄

    react-router-domV6版本改版踩坑記錄

    這篇文章主要介紹了react-router-domV6版本改版踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • React使用context進行跨級組件數(shù)據(jù)傳遞

    React使用context進行跨級組件數(shù)據(jù)傳遞

    這篇文章給大家介紹了React使用context進行跨級組件數(shù)據(jù)傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細,對大家學(xué)習(xí)React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧
    2024-01-01
  • 圖文示例講解useState與useReducer性能區(qū)別

    圖文示例講解useState與useReducer性能區(qū)別

    這篇文章主要為大家介紹了useState與useReducer性能區(qū)別圖文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-05-05

最新評論