react-router-dom6(對比?router5)快速入門指南
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老版本進(jìn)行一些對比。
需要學(xué)習(xí)react-router-dom v5版本的可以點(diǎn)擊：
1.概述
- React Router 以三個(gè)不同的包發(fā)布到npm上，它們分別為：
- react-router：路由的核心庫，提供了很多的：組件、鉤子
- react-router-dom：包含react-router所有內(nèi)容，并添加了一些專門用于DOM的組件，例如
<BrowserRouter>等 - react-router-native：包括react-router所有內(nèi)容，并添加一些專門用于ReactNative的API，例如
<NativeRouter>等
- 與React Router 5.x版本相比，改變了什么？
- 內(nèi)置組件的變化：移除
<Switch />，新增<Routes />等 - 語法的變化：
component={About}變?yōu)?code>element={<About />}等 - 新增多個(gè)hook：
useParams、useNavigate、useMatch等 - 官方明確推薦函數(shù)式組件！
- 內(nèi)置組件的變化：移除
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>標(biāo)簽包裹起來。
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
);
3.重定向
在react-router-dom v5版本中，我們是使用Redirect進(jìn)行重定向的，但是在新版本中呢，刪除了Redirect，換成了另一個(gè)叫做：Navigate。
// 重定向
// react-router-dom v5
<Redirect to="/home" />
// react-router-dom v6
<Route path='/' element={<Navigate to="/home" />} />值得注意的是，Navigate組件接收兩個(gè)屬性，一個(gè)是上面提到的to屬性，另一個(gè)屬性是replace。
<Navigate to="/about" replace />
我們知道，路由的跳轉(zhuǎn)有兩種模式，一種是push，push會將這個(gè)url壓入路由history棧頂； 而replace模式會將棧頂?shù)膗rl替換 。
Navigate組件中可以設(shè)置replace的值為true或者false，默認(rèn)為false，也就是重定向默認(rèn)是push模式跳轉(zhuǎn)。
4.NavLink高亮
高亮樣式
.LinkBackColor {
background-color: orange !important;
color: white !important;
}
修改高亮之前
修改高亮之后
react-router-dom v5中，實(shí)現(xiàn)NavLink高亮使用的是NavLink組件標(biāo)簽中的activeClassName屬性。
<NavLink activeClassName='LinkBackColor' className="list-group-item" to="/about">About</NavLink>
但是在新版本v6中，我們?nèi)绻雽?shí)現(xiàn)NavLink高亮效果，需要將className屬性設(shè)置為一個(gè)函數(shù)。
<NavLink className={
({ isActive }) => { return isActive ? "list-group-item LinkBackColor" : "list-group-item" }
} to="/about">About</NavLink >
代碼優(yōu)化
將計(jì)算className的值封裝成一個(gè)函數(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腳手架搭建完畢之后，項(xiàng)目目錄中就會有一個(gè)router文件夾，里面就是用來存放路由表的。
在react-router-dom v6版本中，也可以很輕松的把路由都中心化地維護(hù)在路由表中了。
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)一維護(hù)路由組件。
首先修改路由表：
{
path: '/home',
element: <Home />,
children: [
{
path: 'message',
element: <Message />
},
{
path: 'news',
element: <News />
}
]
},
將嵌套的二級路由放在children屬性中注冊，這一點(diǎn)與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ì)的說明會在后續(xù)專欄文章《總結(jié)路由API》中提到。
到此這篇關(guān)于快速上手react-router-dom6（對比 router5）的文章就介紹到這了,更多相關(guān)react-router-dom6內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了webpack3+React 的配置全解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
本章深入探討了React?Ref的用法和原理,還介紹了如何使用useImperativeHandle在函數(shù)組件中暴露方法,并詳細(xì)解釋了ref的處理邏輯和原理,包括在commit階段更新ref以及在組件卸載時(shí)的處理,感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了react中使用css的7中方式(最全總結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
React-router?v6在Class組件和非組件代碼中的正確使用
這篇文章主要介紹了React-router?v6在Class組件和非組件代碼中的正確使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了react中antd Upload手動上傳的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
react-router-dom入門使用教程(前端路由原理)
這篇文章主要介紹了react-router-dom入門使用教程,主要包括react路由相關(guān)理解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
react嵌套路由實(shí)現(xiàn)TabBar的實(shí)現(xiàn)
本文主要介紹了react嵌套路由實(shí)現(xiàn)TabBar的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
最近看了vueuse的useVirtualList的實(shí)現(xiàn)方式,發(fā)現(xiàn)虛擬滾動效果不錯,就嘗試著同樣的寫法改成react版本,虛擬列表主要包含三部分組成,offset,viewcapacity,overscan,本文就給大家介紹一下React虛擬列表的實(shí)現(xiàn),需要的朋友可以參考下2023-08-08
React-Native之截圖組件react-native-view-shot的介紹與使用小結(jié)
這篇文章主要介紹了React-Native之截圖組件react-native-view-shot的介紹與使用小結(jié),需本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，要的朋友可以參考下2021-08-08
react 實(shí)現(xiàn)頁面代碼分割、按需加載的方法
本篇文章主要介紹了react 實(shí)現(xiàn)頁面代碼分割、按需加載的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04