1. 路由環(huán)境配置
react-router-dom 版本要在 v6 以上
- 安裝依賴
npm install react-router-dom -S
- 在入口 index.js 引入督笆，并使用路由模式組件包裹根組件
根據(jù)需求選擇 HashRouter 還是 BrowserRouter，默認(rèn)是 BrowserRouter
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
注意：
路由模式
hash 模式： HashRouter
histroy 模式： BrowserRouter
其中 hash 模式 url 路徑上顯示 # 族吻，histroy 模式需要后端配合配置
2. 路由跳轉(zhuǎn)的幾種方式
1. Link澳腹、NavLink
在 App.js 中眶蕉，通過 Link 或者 NavLink 組件，進(jìn)行導(dǎo)航跳轉(zhuǎn)
import React from "react";
import { Link, Route, Routes } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App(props) {
console.log(props);
return (
<div>
<div>
{/* link 導(dǎo)航 */}
{/* 也使用 NavLink孵稽，相比link 它多了一個點擊時的 active 類句狼，可以設(shè)置點擊時樣式 */}
<Link to="/child1">Link: go to child1</Link> |{" "}
<Link to="/child2">Link: go to child2</Link>
</div>
<div>
{/* 定義路由出口 */}
<Routes>
{/* 根組件默認(rèn)展示 */}
{/* <Route path="/" element={<Child1 />} /> */}
{/* 路由重定向 */}
<Route path="/" element={<Navigate to="/Child1" />} />
<Route path="/child1" element={<Child1 />} />
<Route path="/child2" element={<Child2 />} />
</Routes>
</div>
</div>
);
}
export default App;
2. navigate() 路由跳轉(zhuǎn)
在 App.js 中笋熬，通過 react-router-dom 中的 useNavigate() 方法，進(jìn)行編程式導(dǎo)航跳轉(zhuǎn)
注意：withRouter 在 react-router-dom v6 版本中已被棄用
import React from "react";
import { Route, Routes, useNavigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App() {
const navigate = useNavigate();
return (
<div>
<div>
{/* 編程式導(dǎo)航導(dǎo)航 */}
<button
onClick={() => {
navigate("/child1");
}}
>
onClick: go to child1
</button>
<button
onClick={() => {
navigate("/child2");
}}
>
onClick: go to child2
</button>
</div>
<div>
{/* 定義路由出口 */}
<Routes>
{/* 根組件默認(rèn)展示 */}
{/* <Route path="/" element={<Child1 />} /> */}
{/* 路由重定向 */}
<Route path="/" element={<Navigate to="/Child1" />} />
<Route path="/child1" element={<Child1 />} />
<Route path="/child2" element={<Child2 />} />
</Routes>
</div>
</div>
);
}
export default App;
3. navigate(path,{replace: true}) 路由跳轉(zhuǎn)腻菇，清除歷史記錄
此方式跳轉(zhuǎn)會刪除歷史記錄胳螟，使用和傳參方式和 navigate() 相同，只是增加 {replace: true}參數(shù)
Link組件也可以使用 replace 方式筹吐，只需要在Link標(biāo)簽上添加 replace 屬性即可
navigate('/child1/child1B',{replace: true})
4. navigate(num) 路由跳轉(zhuǎn)糖耸，前進(jìn)、后退
// 歷史記錄 前進(jìn)
navigate(1)
// 歷史記錄 后退
navigate(-1)
// 歷史記錄 后退兩步
navigate(-2)
3. 嵌套路由
方式一：分離式
- 配置一級路由結(jié)構(gòu)
在一級路由 App.js 中丘薛，擁有子路由的路由需要在 path 最后加上 /*
import React from "react";
import { Link, Route, Routes, Navigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App(props) {
console.log(props);
return (
<div>
<div>
<Link to="/child1">Link: go to child1</Link> |{" "}
<Link to="/child2">Link: go to child2</Link>
</div>
<div>
{/* 定義路由出口 */}
<Routes>
{/* 根組件默認(rèn)展示 */}
{/* <Route path="/" element={<Child1 />} /> */}
{/* 路由重定向 */}
<Route path="/" element={<Navigate to="/Child1" />} />
<Route path="/child1/*" element={<Child1 />} />
<Route path="/child2" element={<Child2 />} />
</Routes>
</div>
</div>
);
}
export default App;
- 配置子路由結(jié)構(gòu)
在 Child1.js 中嘉竟，link 標(biāo)簽中要寫全路徑，路由出口的 path 中只寫路由名稱
import React, { Component } from "react";
import { Link, Route, Routes } from "react-router-dom";
import Child1A from "./Child1A";
import Child1B from "./Child1B";
export default class Child1 extends Component {
render() {
return (
<div>
<div>
<Link to="/child1/child1A">Link: go to Child1A</Link> |{" "}
<Link to="/child1/child1B">Link: go to Child1B</Link>
</div>
<div>
{/* 定義路由出口 */}
<Routes>
{/* 路由重定向 */}
{/* <Route path="/" element={<Navigate to="/Child1A" />} /> */}
{/* 根組件默認(rèn)展示 */}
<Route path="/" element={<Child1A />} />
<Route path="child1A" element={<Child1A />} />
<Route path="child1B" element={<Child1B />} />
</Routes>
</div>
</div>
);
}
}
方式二：集合式
- 配置嵌套路由結(jié)構(gòu)
在 App.js 中洋侨，以 Route 組件嵌套的方式配置嵌套路由結(jié)構(gòu)
import React from "react";
import { Link, Route, Routes, Navigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
import Child1A from "./components/Child1A";
import Child1B from "./components/Child1B";
function App() {
return (
<div>
<div>
<Link to="/child1">Link: go to child1</Link> |{" "}
<Link to="/child2">Link: go to child2</Link>
</div>
<div>
{/* 定義路由出口 */}
<Routes>
<Route path="/" element={<Navigate to="/Child1/child1A" />} />
<Route path="/child1" element={<Child1 />}>
<Route path="child1A" element={<Child1A />} />
<Route path="child1B" element={<Child1B />} />
</Route>
<Route path="/child2" element={<Child2 />} />
</Routes>
</div>
</div>
);
}
export default App;
- 定義子子路由出口
在 Child1.js 中舍扰，引入 Outlet 并定義出口位置
import React, { Component } from "react";
import { Link, Outlet } from "react-router-dom";
export default class Child1 extends Component {
render() {
return (
<div>
<div>
<Link to="/child1/child1A">Link: go to Child1A</Link> |{" "}
<Link to="/child1/child1B">Link: go to Child1B</Link>
</div>
<div>
{" "}
<Outlet />
</div>
</div>
);
}
}
