第41节——页面中使用路由
一、页面中进行路由跳转
1、普通跳转
import { useNavigate } from "react-router-dom";
export default function APage() {
/**
* 使用useNavigate钩子返回一个方法
* 使用这个方法进行跳转
*/
const navigate = useNavigate();
const linlB = () => {
// 直接跟我们定义的path
navigate('/b')
}
return (
A页面
);
}
2、替换当前页面
import { useNavigate } from "react-router-dom";
export default function APage() {
/**
* 使用useNavigate钩子返回一个方法
* 使用这个方法进行跳转
*/
const navigate = useNavigate();
const replaceB = () => {
// 直接跟我们定义的path
navigate('/b', { replace: true })
}
return (
A页面
);
}
3、前进或后退到浏览器历史记录中的特定页面
function MyComponent() {
const navigate = useNavigate();
function handleBack() {
// 后退几页
navigate(-1);
}
function handleForward() {
// 前进几页
navigate(1);
}
return (
);
}
二、路由传参
1. 路由参数（params形式）
路由参数是将参数嵌入到 URL 中的一种方式。在 React Router 6 中，我们可以通过在路由路径中使用冒号来定义参数
定义
获取
我们定义了一个名为 id 的参数，它可以在 URL 中的 /:id 部分找到。当用户访问 /users/123 时，123 将成为路由参数，并可以在组件中通过 useParams 钩子函数访问
function UserDetails() {
const { id } = useParams();
// ...
}
2、查询参数（search形式）
查询参数是在 URL 中使用问号传递的一种参数。在 React Router 6 中，我们可以通过在 URL 中添加查询参数来传递参数
定义
User Details
获取
我们向 /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 (
// 首先确定什么模式，那么最上层组件就是用这个模式
}>
}>
}>
);
}
页面中使用
// 直接使用Outlet组件 或者 使用useOutlet都可以
import { Link, Outlet } from "react-router-dom";
export default function DPage() {
return (
A页面
b页面
c页面
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 (
// 首先确定什么模式，那么最上层组件就是用这个模式
{/*
path后面加上/*
*/}
);
}
页面中使用
// 直接使用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 (
{/*
注意：跳转的时候必须要加上父级路由的path
*/}
A页面
b页面
c页面
{/*
我们再定义子路由的path的时候不需要加父组件的path
*/}
}>
}>
}>
);
}