1.目錄
A. 能夠說出React路由的作用
B. 能夠掌握react-router-dom的基本使用
C. 能夠使用編程式導航跳轉路由
D. 能夠知道React路由的匹配模式
2.目錄
A. React路由介紹
B. 路由的基本使用
C. 路由的執行過程
D. 編程式導航
E. 默認路由
F. 匹配模式
3.react路由介紹
現代的前端應用大多都是SPA(單頁應用程序)，也就是只有一個HTML頁面的應用程序。因為它的用戶體
驗更好、對服務器的壓力更小，所以更受歡迎。為了有效的使用單個頁面來管理原來多頁面的功能，前
端路由應運而生。
A. 前端路由的功能：讓用戶從一個視圖（頁面）導航到另一個視圖（頁面）
B. 前端路由式一套映射規則，在React中，是URL路徑與組件的對應關系
C. 使用React路由簡單來說，就是配置路徑和組件（配對）
4.路由的基本使用
4.1 基本使用
A. 安裝：yarn/npm add react-router-dom
B. 導入路由的三個核心組件：Router/Route/Link
import { BrowserRouter as Router, Route, Link} from ‘react-router-dom’
C.使用Router組件包裹整個應用（重要）
<Router>
<div className=”App”>
//......省略頁面內容
</div>
</Router>
A. 使用Link組件作為導航菜單（路由入口）
<Link to="/first">頁面一</Link>
B. 使用Route組件配置路由規則和要展示的組件（路由出口）
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
const First = () => <p>頁面一的內容</p>;
const App4 = () => {return (// 使用 Router 包裹整個應用<Router><div><h1>React路由基礎</h1>{/* 指定路由入口 */}<Link to="/first">頁面1</Link>{/* 指定路由出口 */}<Routes><Route path="/first" element={<First></First>}></Route></Routes></div></Router>);
};
ReactDOM.createRoot(document.getElementById("root")).render(<App4></App4>);
4.2 常用組件說明
A. Router組件：包裹整個應用，一個React應用只需要使用一次
B. 兩種常用Router:HashRouter和BrowserRouter
C. HashRouter:使用URL的哈希值實現（localhost:3000/#/first）
D. （推薦）BrowserRouter:使用H5的history API實現（localhost:3000/first）
E. Link組件：用于指定導航鏈接（a標簽）
F. Route組件：指定路由展示組件相關信息
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
const First = () => <p>頁面一的內容</p>;
const App4 = () => {return (// 使用 Router 包裹整個應用<Router><div><h1>React路由基礎</h1>{/* 指定路由入口 */}<Link to="/first">頁面1</Link>{/* 指定路由出口 */}{/* path：路由規則element：指定組件就展示在哪里Route 組件寫在哪里，渲染出來的組件*/}<Routes><Route path="/first" element={<First></First>}></Route></Routes></div></Router>);
};
ReactDOM.createRoot(document.getElementById("root")).render(<App4></App4>);
5.路由的執行過程
A. 點擊Link組件（a標簽），修改了瀏覽器地址欄中的url
B. React路由監聽到地址欄url的變化
C. React路由內部遍歷所有Route組件，使用路由規則（path）與pathname進行匹配
D. 當路由規則（path）能夠匹配地址欄中的pathname時，就展示該Route組件的內容
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
const First = () => <p>頁面一的內容</p>;
const Home = () => <h1>首頁的內容</h1>;
const App4 = () => {return (// 使用 Router 包裹整個應用<Router><div><h1>React路由基礎</h1>{/* 指定路由入口 */}<Link to="/first">頁面1</Link><Link to="/home">首頁</Link>{/* 指定路由出口 */}{/* path：路由規則element：指定組件就展示在哪里Route 組件寫在哪里，渲染出來的組件*/}<Routes><Route path="/first" element={<First></First>}></Route><Route path="/home" element={<Home></Home>}></Route></Routes></div></Router>);
};
ReactDOM.createRoot(document.getElementById("root")).render(<App4></App4>);
6.編程式導航
A. 場景：點擊登錄按鈕，登錄成功后，通過代碼跳轉到后臺首頁，如何實現？
B. 編程式導航：通過JS代碼來實現頁面跳轉
C. History是React路由提供的，用于獲取瀏覽器歷史記錄的相關信息
D. push(path):跳轉到某個頁面，參數path表示要跳轉的路徑
E. go(n):前進或后退到某個頁面，參數n表示前進或后退頁面數量（比如：-1表示后退到上一頁）
8.history.js
import React from "react";
import {BrowserRouter as Router,Routes,Route,Link,useNavigate,
} from "react-router-dom";
function Login() {let navigate = useNavigate();const handleClick = () => {navigate("/home");};return (<div><p>我是登錄頁</p><button onClick={handleClick}>登錄</button></div>);
}const Home = () => {let navigate = useNavigate();function goBack() {navigate(-1);}return (<div><h1>后臺首頁</h1><button onClick={goBack}>返回上一頁</button></div>);
};const App60 = () => {return (<Router><div><h1>編程式導航</h1><Link to="/login">去登錄頁面</Link><Link to="/home">首頁</Link><Routes><Route path="/login" element={<Login></Login>}></Route><Route path="/home" element={<Home></Home>}></Route></Routes></div></Router>);
};export default App60;
index.js
import App60 from "./8history";
ReactDOM.createRoot(document.getElementById("root")).render(<App60></App60>);
7.默認路由
A. 問題：現在的路由都是點擊導航菜單后展示的，如何在進入頁面的時候就展示呢？
B. 默認路由：表示進入頁面時就會匹配的路由
C. 默認路由path為：/
