1. 路由环境配置
react-router-dom 版本要在 v6 以上
- 安装依赖
npm install react-router-dom -S
- 在入口 index.js 引入，并使用路由模式组件包裹根组件
根据需求选择 HashRouter 还是 BrowserRouter，默认是 BrowserRouter
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
注意：
路由模式
hash 模式： HashRouter
histroy 模式： BrowserRouter
其中 hash 模式 url 路径上显示 # ，histroy 模式需要后端配合配置
2. 路由跳转的几种方式
1. Link、NavLink
在 App.js 中，通过 Link 或者 NavLink 组件，进行导航跳转
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 导航 */}
{/* 也使用 NavLink，相比link 它多了一个点击时的 active 类，可以设置点击时样式 */}
<Link to="/child1">Link: go to child1</Link> |{" "}
<Link to="/child2">Link: go to child2</Link>
</div>
<div>
{/* 定义路由出口 */}
<Routes>
{/* 根组件默认展示 */}
{/* <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() 路由跳转
在 App.js 中，通过 react-router-dom 中的 useNavigate() 方法，进行编程式导航跳转
注意：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>
{/* 编程式导航导航 */}
<button
onClick={() => {
navigate("/child1");
}}
>
onClick: go to child1
</button>
<button
onClick={() => {
navigate("/child2");
}}
>
onClick: go to child2
</button>
</div>
<div>
{/* 定义路由出口 */}
<Routes>
{/* 根组件默认展示 */}
{/* <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}) 路由跳转，清除历史记录
此方式跳转会删除历史记录，使用和传参方式和 navigate() 相同，只是增加 {replace: true}参数
Link组件也可以使用 replace 方式，只需要在Link标签上添加 replace 属性即可
navigate('/child1/child1B',{replace: true})
4. navigate(num) 路由跳转，前进、后退
// 历史记录 前进
navigate(1)
// 历史记录 后退
navigate(-1)
// 历史记录 后退两步
navigate(-2)
3. 嵌套路由
方式一：分离式
- 配置一级路由结构
在一级路由 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>
{/* 根组件默认展示 */}
{/* <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;
- 配置子路由结构
在 Child1.js 中，link 标签中要写全路径，路由出口的 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" />} /> */}
{/* 根组件默认展示 */}
<Route path="/" element={<Child1A />} />
<Route path="child1A" element={<Child1A />} />
<Route path="child1B" element={<Child1B />} />
</Routes>
</div>
</div>
);
}
}
方式二：集合式
- 配置嵌套路由结构
在 App.js 中，以 Route 组件嵌套的方式配置嵌套路由结构
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>
);
}
}
