一、页面中进行路由跳转
1、普通跳转
import { useNavigate } from "react-router-dom";
export default function APage() {
/**
* 使用useNavigate钩子返回一个方法
* 使用这个方法进行跳转
*/
const navigate = useNavigate();
const linlB = () => {
// 直接跟我们定义的path
navigate('/b')
}
return (
<div>
<div>A页面</div>
<button onClick={() => linlB()}>跳转到B页面</button>
</div>
);
}
2、替换当前页面
import { useNavigate } from "react-router-dom";
export default function APage() {
/**
* 使用useNavigate钩子返回一个方法
* 使用这个方法进行跳转
*/
const navigate = useNavigate();
const replaceB = () => {
// 直接跟我们定义的path
navigate('/b', { replace: true })
}
return (
<div>
<div>A页面</div>
<button onClick={() => replaceB()}>把当前页面替换成B页面</button>
</div>
);
}
3、前进或后退到浏览器历史记录中的特定页面
function MyComponent() {
const navigate = useNavigate();
function handleBack() {
// 后退几页
navigate(-1);
}
function handleForward() {
// 前进几页
navigate(1);
}
return (
<div>
<button onClick={handleBack}>Back</button>
<button onClick={handleForward}>Forward</button>
</div>
);
}
二、路由传参
1. 路由参数(params形式)
路由参数是将参数嵌入到 URL 中的一种方式。在 React Router 6 中,我们可以通过在路由路径中使用冒号来定义参数
定义
<Route path="/users/:id" element={<UserDetails />} />
获取
我们定义了一个名为 id 的参数,它可以在 URL 中的 /:id 部分找到。当用户访问 /users/123 时,123 将成为路由参数,并可以在组件中通过 useParams 钩子函数访问
function UserDetails() {
const { id } = useParams();
// ...
}
2、查询参数(search形式)
查询参数是在 URL 中使用问号传递的一种参数。在 React Router 6 中,我们可以通过在 URL 中添加查询参数来传递参数
定义
<Link to="/users?id=123">User Details</Link>
获取
我们向 /users 页面传递了一个名为 id 的查询参数,并将其设置为 123。我们可以在组件中使用 useLocation 钩子函数获取当前 URL 中的查询参数,并使用 URLSearchParams 对象来解析它们
function UserDetails() {
const [searchParams] = useSearchParams();
// 使用URLSearchParams这个对象解析url的search,然后直接获取id
const id = searchParams.get('id');
// ...
}
3. 状态对象
状态对象是一种可以在导航期间传递数据的机制。在 React Router 6 中,我们可以在 navigate 函数中使用第二个参数来传递状态对象
定义
function handleClick() {
navigate('/users', { state: { id: 123 } });
}
获取
我们在导航到 /users 页面时传递了一个名为 id 的状态对象。我们可以在组件中使用 useLocation 钩子函数获取当前 URL 中的状态对象
function UserDetails() {
const location = useLocation();
const { id } = location.state;
// ...
}
注意
使用状态对象传递数据会将数据存储在浏览器的会话历史中,因此它仅适用于页面之间的相邻导航。如果用户从当前页面返回到其他页面,状态对象中的数据将被清除。如果需要在不同页面之间共享数据,最好使用其他的数据传递方式,如 Redux 或 Context API
三、嵌套路由
点击顶栏导航按钮。页面跳转。导航栏保持不变。页面改变
1、使用Outlet实现
routerComponent.jsx定义
/**
* 从react-router-dom中 引用HashRouter 是一个组件
* 如果需要别的模式那就引入其他模式
*
*/
import React from "react";
import { HashRouter, Route, Routes } from "react-router-dom";
import APage from "./learn-router/a";
import BPage from "./learn-router/b";
import CPage from "./learn-router/c";
import DPage from "./learn-router/d";
export default function RouterComponent() {
return (
// 首先确定什么模式,那么最上层组件就是用这个模式
<HashRouter>
<Routes>
<Route path="/d" element={<DPage />}>
{/*
嵌套路由子路由必须包含父级路由的path
🤔一下为什么
*/}
<Route path="/d/a" element={<APage></APage>}></Route>
<Route path="/d/b" element={<BPage></BPage>}></Route>
<Route path="/d/c" element={<CPage></CPage>}></Route>
</Route>
</Routes>
</HashRouter>
);
}
页面中使用
// 直接使用Outlet组件 或者 使用useOutlet都可以
import { Link, Outlet } from "react-router-dom";
export default function DPage() {
return (
<div>
<div>
<Link to="/d/a">A页面</Link>
<Link to="/d/b">b页面</Link>
<Link to="/d/c">c页面</Link>
</div>
<Outlet></Outlet>
</div>
);
}
2、直接在页面中定义
routerComponent.jsx定义
/**
* 从react-router-dom中 引用HashRouter 是一个组件
* 如果需要别的模式那就引入其他模式
*
*/
import React from "react";
import { HashRouter, Route, Routes } from "react-router-dom";
import APage from "./learn-router/a";
import BPage from "./learn-router/b";
import CPage from "./learn-router/c";
import DPage from "./learn-router/d";
export default function RouterComponent() {
return (
// 首先确定什么模式,那么最上层组件就是用这个模式
<HashRouter>
<Routes>
{/*
path后面加上/*
*/}
<Route path="/d/*" element={<DPage />}>
</Route>
</Routes>
</HashRouter>
);
}
页面中使用
// 直接使用Outlet组件 或者 使用useOutlet都可以
import { Link, Routes, Route } from "react-router-dom";
import APage from "./a";
import BPage from "./b";
import CPage from "./c";
export default function DPage() {
return (
<div>
<div>
{/*
注意:跳转的时候必须要加上父级路由的path
*/}
<Link to="/d/a">A页面</Link>
<Link to="/d/b">b页面</Link>
<Link to="/d/c">c页面</Link>
</div>
<Routes>
{/*
我们再定义子路由的path的时候不需要加父组件的path
*/}
<Route path="/a" element={<APage></APage>}></Route>
<Route path="/b" element={<BPage></BPage>}></Route>
<Route path="/c" element={<CPage></CPage>}></Route>
</Routes>
</div>
);
}