黑馬React: ReactRouter

Date: November 21, 2023
Sum: React路由基礎、路由導航、導航傳參、嵌套路由配置

路由快速上手

---

---

1. 什么是前端路由

一個路徑 path 對應一個組件 component 當我們在瀏覽器中訪問一個 path 的時候，path 對應的組件會在頁面中進行渲染

---

---

2. 創建路由開發環境

# 使用CRA創建項目
npx create-react-app react-router-pro# 安裝最新的ReactRouter包
npm i react-router-dom# 啟動項目
npm run start

---

---

3. 快速開始

import React from 'react'
import ReactDOM from 'react-dom/client'const router = createBrowserRouter([{path:'/login',element: <div>登錄</div>},{path:'/article',element: <div>文章</div>}
])ReactDOM.createRoot(document.getElementById('root')).render(<RouterProvider router={router}/>
)

---

---

---

抽象路由模塊

---

---

---

路由導航

1. 什么是路由導航

路由系統中的多個路由之間需要進行路由跳轉，并且在跳轉的同時有可能需要傳遞參數進行通信

---

---

2. 聲明式導航

聲明式導航是指通過在模版中通過 組件描述出要跳轉到哪里去，比如后臺管理系統的左側菜單通常使用這種方式進行

<Link to="/article">文章</Link>

語法說明：通過給組件的to屬性指定要跳轉到路由path，組件會被渲染為瀏覽器支持的a鏈接，如果需要傳參直接通過字符串拼接的方式拼接參數即可

---

---

3. 編程式導航

編程式導航是指通過 useNavigate 鉤子得到導航方法，然后通過調用方法以命令式的形式進行路由跳轉，比如想在登錄請求完畢之后跳轉就可以選擇這種方式，更加靈活

語法說明：通過調用navigate方法傳入地址path實現跳轉

import { Link, useNavigate } from 'react-router-dom'const Login = () => {const navigate = useNavigate()return (<div>我是登陸頁{/* 聲明式寫法 */}<Link to="/article">跳轉到文章頁</Link>{/* 命令式寫法 */}<button onClick={() => navigate('/article')}>跳轉到文章頁</button></div>)
}export default Login

---

---

---

導航傳參

searchParams傳參：

src/page/Article/index.js

import { useSearchParams } from "react-router-dom"const Artitlce = () => {const [params] = useSearchParams()const id = params.get('id')const name = params.get('name')return <div>我是文章頁 - {id} - {name}</div>
}export default Artitlce

params傳參：

src/page/Article/index.js

import { useSearchParams, useParams } from "react-router-dom"const Artitlce = () => {// const [params] = useSearchParams()// const id = params.get('id')// const name = params.get('name')const params = useParams()let id = params.idlet name = params.name// return <div>我是文章頁 - {id} - {name}</div>return <div>我是文章頁 - {id} - {name}</div>
}export default Artitlce

src/router/index.js

import Login from '../page/Login/index'
import Article from '../page/Article/index'import { createBrowserRouter } from 'react-router-dom'const router = createBrowserRouter([{path: '/login',element: <Login/>},{// path: '/article',path: '/article/:id/:name', // 配置router中的id與nameelement: <Article/>},
])export default router

注意：采用 params 這種方式需要配置一波router

---

---

---

嵌套路由配置

1. 什么是嵌套路由

在一級路由中又內嵌了其他路由，這種關系就叫做嵌套路由，嵌套至一級路由內的路由又稱作二級路由，例如：

---

---

2. 嵌套路由配置

實現步驟:

1. 使用 children屬性配置路由嵌套關系

2. 使用 <Outlet/> 組件配置二級路由渲染位置

Case:

Code:

router/index.js

const router = createBrowserRouter([{path: '/',element: <Layout/>,children: [{path: 'board',element: <Board/>},{path: 'About',element: <About/>}]},{path: '/login',element: <Login/>,},{// path: '/article',path: '/article/:id/:name',element: <Article/>},
])

src/page/Layout/index.js

const Layout = () => {return (<div>我是一級路由layout組件--<Link to="/board">面板</Link>--<Link to="/about">關于</Link>{/* 配置二級路由出口 */}<Outlet></Outlet></div>)
}

Res:

拓展：

路由出口：路徑匹配的組件顯示的位置

參考：路由出口的基礎知識

Vue2：路由

---

---

3. 默認二級路由

需求：默認就顯示二級路由，比如默認顯示面板

當訪問的是一級路由時，默認的二級路由組件可以得到渲染，只需要在二級路由的位置去掉path，設置index屬性為true

router.js

const router = createBrowserRouter([{path: '/',element: <Layout/>,children: [{index: true,  // 默認顯示 indexelement: <Board/>},{path: 'About',element: <About/>}]},{path: '/login',element: <Login/>,},{// path: '/article',path: '/article/:id/:name',element: <Article/>},
])

Layout/index.js

這里需要把

import { Outlet, Link } from "react-router-dom"
import Board from "../Board"
import About from "../About"const Layout = () => {return (<div>我是一級路由layout組件--<Link to="/">面板</Link> // 修改原來的 to="/board" 變為 to="/"--<Link to="/about">關于</Link>{/* 配置二級路由出口 */}<Outlet></Outlet></div>)
}export default Layout

---

---

4. 404路由配置

場景：當瀏覽器輸入url的路徑在整個路由配置中都找不到對應的 path，為了用戶體驗，可以使用 404 兜底組件進行渲染

實現步驟：

1. 準備一個NotFound組件
2. 在路由表數組的末尾，以*號作為路由path配置路由
   ![
   

page/NotFound

const NotFound = () => {return (<div>this is not found</div>)
}export default NotFound

router/index.js

import Login from '../page/Login/index'
import Article from '../page/Article/index'
import Layout from '../page/Layout'
import About from '../page/About'
import Board from '../page/Board'
import NotFound from '../page/NotFound'import { createBrowserRouter } from 'react-router-dom'const router = createBrowserRouter([{path: '/',element: <Layout/>,children: [{index: true,element: <Board/>},{path: 'About',element: <About/>}]},{path: '/login',element: <Login/>,},{// path: '/article',path: '/article/:id/:name',element: <Article/>},{path: '*',element: <NotFound/>}
])export default router

---

---

5. 倆種路由模式

各個主流框架的路由常用的路由模式有倆種，history模式和hash模式, ReactRouter分別由 createBrowerRouter 和 createHashRouter 函數負責創建

路由模式	url表現	底層原理	是否需要后端支持
history	url/login	history對象 + pushState事件	需要
hash	url/#/login	監聽hashChange事件	不需要

Code:

history模式

import { createBrowserRouter } from 'react-router-dom'const router = createBrowserRouter([

Res:

hash模式

import { createBrowserRouter, createHashRouter } from 'react-router-dom'const router = createHashRouter([

Res:

---

---