前端路由的功能：讓用戶從一個頁面跳轉(zhuǎn)到另一個頁面。
前端路由是一套映射規(guī)則，在 React 中，是 URL 路徑與組件的對應(yīng)關(guān)系。
使用 React 路由簡單來說就是配置路徑與組件（配對）。
路由的本質(zhì): 一個路徑 path 對應(yīng)唯一的一個組件 component 當我們訪問一個 path 自動把 path 對應(yīng)的組件進行渲染。
React 路由基本使用
1.安裝
首先你需要有一個 React 項目：npx create-react-app my-app （這是 React 腳手架初始化項目）
注：React 路由使用前需要先安裝 react-router-dom 的包，React 腳手架初始化項目時不會自動安裝這個包，需要我們手動再安裝
安裝包：yarn add react-router-dom 或 npm i react-router-dom@6
（注：本文使用的 react-router-dom 版本為 ^6.3.0）
2.按需導入包中的核心組件
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
說明：
-
BrowerRouter：包裹整個應(yīng)用，一個 React 應(yīng)用只需要使用一次，這個組件可以和?HashRouter 替換，二者主要區(qū)別如下：
| 模式 |
實現(xiàn)方式 |
路由url表現(xiàn) |
| HashRouter |
監(jiān)聽url hash值實現(xiàn) |
http://localhost:3000/#/about |
| BrowerRouter |
h5的 history.pushState API實現(xiàn) |
http://localhost:3000/about |
- ?Link：用于指定導航鏈接，完成聲明式的路由跳轉(zhuǎn) 類似于 <router-link />（渲染到 DOM 中它其實就是一個 a 鏈接）
- ?Routes：提供一個路由出口，組件內(nèi)部會存在多個內(nèi)置的 Route 組件，滿足條件的路由會被渲染到組件內(nèi)部（類比 router-view）
-
Route：用于定義路由路徑 path 和渲染組件 element 的對應(yīng)關(guān)系 [element：因為 react 體系內(nèi)把組件叫做 react element]
代碼示例
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
function Home () {
return (
<p>這是首頁的內(nèi)容</p>
)
}
function About () {
return (
<p>這是關(guān)于的內(nèi)容</p>
)
}
function App () {
return (
// 聲明當前要用一個非hash模式的路由
<BrowserRouter>
<div className="App">
{/* 指定跳轉(zhuǎn)的組件，to 用來配置路由地址 */}
<Link to="/">首頁</Link><br />
<Link to="/about">關(guān)于</Link>
{/* 路由出口：路由對應(yīng)的組件會在這里進行渲染 */}
<Routes>
{/* 指定路由路徑和組件的對應(yīng)關(guān)系：path 代表路徑，element 代表對應(yīng)的組件，它們成對出現(xiàn) */}
<Route path='/' element={<Home />}></Route>
<Route path='/about' element={<About />}></Route>
</Routes>
</div>
</BrowserRouter>
)
}
export default App
編程式導航
注：上面使用 <Link to="/">跳轉(zhuǎn)</Link> 的方式是：聲明式導航
編程式導航: 通過 js 編程的方式進行路由頁面跳轉(zhuǎn)，比如說從首頁跳轉(zhuǎn)到關(guān)于頁
實現(xiàn)步驟：
- 導入一個 useNavigate 鉤子函數(shù)
- 執(zhí)行 useNavigate 函數(shù) 得到 跳轉(zhuǎn)函數(shù)
- 在事件中執(zhí)行跳轉(zhuǎn)函數(shù)完成路由跳轉(zhuǎn)
示例代碼
// 導入useNavigate函數(shù)
import { useNavigate } from 'react-router-dom'
const Home = () => {
// 執(zhí)行函數(shù)
const navigate = useNavigate()
return (
<div>
Home
<button onClick={ ()=> navigate('/about') }> 跳轉(zhuǎn)關(guān)于頁 </button>
</div>
)
}
export default Home注: 如果在跳轉(zhuǎn)時不想添加歷史記錄，可以添加額外參數(shù) replace 為 true
navigate('/about', { replace: true } )路由傳參
跳轉(zhuǎn)路由的同時，很多時候都需要傳遞參數(shù)，這里有兩種傳參方式：
1. searchParams傳參
路由傳參
navigate('/?id=1001&name=zs', { replace: true })
路由取參
import { useSearchParams } from 'react-router-dom'
// 在Home中讀取頁面?zhèn)鬟f過來的參數(shù)(以路徑拼接的方式傳遞過來的參數(shù))
function Home () {
const [params] = useSearchParams()
// params 是一個對象，對象里有一個get方法用來獲取對應(yīng)的參數(shù)
// 把參數(shù)的名稱作為get方法的實參傳遞即可
const id = params.get('id')
const name = params.get('name')
return (
<p>這是首頁的內(nèi)容,首頁獲取到的參數(shù)id:{id},name:{name}</p>
)
}2.params傳參
路由傳參
navigate('/about/1002/lisi', { replace: true })
設(shè)置參數(shù)占位符
{/* 使用 params 傳參和接收參數(shù)時，指定路由路徑時需要提前使用“占位符”給參數(shù)進行占位 */}
<Route path='/about/:id/:name' element={<About />}></Route>路由取參
import { useParams } from 'react-router-dom'
// 在關(guān)于頁面接收登錄頁使用 params 傳參的方式傳遞過來的參數(shù)
function About () {
const params = useParams()
return (
<p>這是關(guān)于的內(nèi)容,接收到登錄頁傳遞過來的id為：{params.id},name為{params.name}</p>
)
}注：以上兩種路由傳參的方式各有優(yōu)劣，沒有說一定要使用哪一種，個人根據(jù)習慣使用即可。
嵌套路由
實現(xiàn)步驟：
- 在一級路由的 <Route></Route> 中定義嵌套路由聲明
- 在該一級路由組件內(nèi)部通過 <Outlet /> 指定二級路由出口
示例代碼
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom'
const Home = () => {
return (
<div>
<p>首頁</p>
<Link to='/'>to board</Link><br />
<Link to='/artacle'>to artacle</Link><br />
{/* 定義二級路由出口,嵌套的路由對應(yīng)組件將渲染到此處 */}
<Outlet />
</div>
)
}
const Board = () => {
return (
<div>這是 Board 組件，這是默認顯示的二級組件</div>
)
}
const Artacle = () => {
return (
<div>這是 Artacle 組件</div>
)
}
function App () {
return (
<BrowserRouter>
<div className="App">
<Routes>
{/* 一級路由 */}
<Route path='/' element={<Home />}>
{/* 在一級路由內(nèi)部嵌套二級路由 */}
{/* 默認二級：添加 index 屬性，把它自己的 path 去掉即可 */}
<Route index element={<Board />}></Route>
{/* <Route path='board' element={<Board />}></Route> */}
<Route path='artacle' element={<Artacle />}></Route>
</Route>
</Routes>
</div>
</BrowserRouter>
)
}
export default App
注：默認二級路由：（見示例代碼）
實現(xiàn)步驟:
- 給默認二級路由標記 index 屬性
- 把原本的路徑 path 屬性去掉
404路由配置
場景：當 url 的路徑在整個路由配置中都找不到對應(yīng)的 path ，使用404兜底組件進行渲染。文章來源：http://www.zghlxwxcb.cn/news/detail-431257.html
實現(xiàn)步驟:
- 準備一個 NotFound 組件（404的頁面）
- 把該組件的路由對應(yīng)關(guān)系配置為 Routes 內(nèi)部的一級路由，path='*'
示例代碼
import { BrowserRouter, Routes, Route } from 'react-router-dom'
// 定義 404 組件
const NotFound = () => {
return (
<h1>404 抱歉,頁面未找到TAT</h1>
)
}
function App () {
return (
<BrowserRouter>
<div className="App">
<Routes>
{/* 一級路由 */}
{/* 當所有路徑都沒有匹配到時渲染此組件 作為兜底 */}
<Route path='*' element={<NotFound />}></Route>
</Routes>
</div>
</BrowserRouter>
)
}
export default App
集中式路由配置
場景: 當我們需要路由權(quán)限控制點時候, 對路由數(shù)組做一些權(quán)限的篩選過濾，所謂的集中式路由配置就是用一個數(shù)組統(tǒng)一把所有的路由對應(yīng)關(guān)系寫好替換本來的 Roues 組件文章來源地址http://www.zghlxwxcb.cn/news/detail-431257.html
示例代碼
import { BrowserRouter, Routes, Route, useRoutes } from 'react-router-dom'
import Layout from './pages/Layout'
import Board from './pages/Board'
import Article from './pages/Article'
import NotFound from './pages/NotFound'
// 1. 準備一個路由數(shù)組 數(shù)組中定義所有的路由對應(yīng)關(guān)系
const routesList = [
{
path: '/',
element: <Layout />,
children: [
{
element: <Board />,
index: true, // index設(shè)置為true 變成默認的二級路由
},
{
path: 'article',
element: <Article />,
},
],
},
// 增加n個路由對應(yīng)關(guān)系
{
path: '*',
element: <NotFound />,
},
]
// 2. 使用useRoutes方法傳入routesList生成Routes組件
function WrapperRoutes() {
let element = useRoutes(routesList)
return element
}
function App() {
return (
<div className="App">
<BrowserRouter>
{/* 3. 替換之前的Routes組件 */}
<WrapperRoutes />
</BrowserRouter>
</div>
)
}
export default App到了這里，關(guān)于React-路由 react-router-dom的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
