react课程14.1-React-Router专题

本篇文章重重整理一下React Router的工具和用法集合。

一、useNavigate

用于通过编程方式在 React 应用中进行导航（页面跳转）。相比于传统的 <a> 标签或者 Link 组件，useNavigate 提供了更灵活的方式来实现跳转，例如基于用户交互或某些条件时自动跳转。

（1）基本用法

useNavigate 返回一个 navigate 函数，可以调用该函数并传入路径，实现导航。

const navigate = useNavigate(); // 使用 useNavigate 钩子

const goToAboutPage = () => {
    navigate("/about"); // 编程式导航到 "/about" 路由
  };

跳转类型

• 绝对路径：从根路径开始，如 navigate("/about")。
• 相对路径：相对于当前路径，如 navigate("profile")。

（2）replace替换历史记录

默认情况下，navigate 会在浏览器的历史记录中添加一个新条目，这样用户可以通过浏览器的“后退”按钮回到之前的页面。如果不想让用户通过后退按钮返回，可以使用 replace 选项。

navigate("/dashboard", { replace: true });

这样跳转后，/dashboard 会替换当前的页面，用户不能通过“后退”按钮返回到原页面。

（3）前进和后退

useNavigate 还可以像浏览器的前进和后退按钮一样，基于历史记录进行导航。

// 后退到上一个页面
navigate(-1);

// 前进到下一个页面
navigate(1);

（4）传递状态

可以通过 navigate 传递一些状态信息到目标页面，这些状态信息不会显示在 URL 中，但可以在目标页面中通过 useLocation 钩子来读取。

（5）阻止导航

在某些情况下，你可能需要阻止导航（例如用户没有保存表单数据时）。React Router 提供了 usePrompt 来处理这个需求。

（6）注意事项

为什么 navigate 通常在回调函数或 useEffect 中使用？

1. 避免过早执行：navigate 是一个会引起页面重定向的操作，调用它会导致组件状态发生改变。如果你在组件首次渲染的过程中调用它，可能会引发不必要的重渲染或不一致的状态。因此，它通常在回调函数（如 onClick）中使用，或放在 useEffect 中，确保页面已经完成初始渲染，且有合适的时机来执行导航操作。
2. 确保页面逻辑的正确性：像表单提交或身份验证这样的场景，通常在特定的回调或生命周期阶段发生。在这些阶段使用 navigate 能确保导航是在合适的时刻执行，不会打断应用的正常渲染逻辑。

在用户交互（如按钮点击）时，可以在事件处理回调中使用 navigate

二、useNavigation

useNavigation 是 React Router v6 提供的一个钩子，用于获取当前导航（页面跳转）的状态。它可以帮助你在组件中监控导航的进展，尤其是用于处理页面加载状态、异步数据请求等情况。

（1）useNavigation 的主要用途

1. 监控导航状态：你可以检查当前的导航状态，例如是否处于加载、提交状态。
2. 显示加载指示器：可以根据导航状态显示一个“加载中”的提示，以提升用户体验。

（2）导航状态

**idle**：空闲状态，没有进行导航操作。

**loading**：正在加载新的页面或资源。

**submitting**：当前正在提交数据（例如表单提交）。

三、Navigate

<Navigate> 组件用于重定向用户到指定的路由。它允许你在特定条件下从一个页面自动跳转到另一个页面，而无需用户手动点击。

<Navigate> 组件的基本用法是将用户从一个路由重定向到另一个路由。你只需要指定 to 属性为目标路径即可。

replace 属性

<Navigate> 组件中的 replace 属性控制是否用新页面替换当前页面在浏览器历史记录中的位置。如果不使用 replace，则默认会将新页面加入浏览器历史记录中，用户可以通过“后退”按钮返回原页面。

EG：

<Route index element={<Navigate replace to="cities" />} />

不加 replace 时，浏览器的历史记录中会保存 Navigate 重定向的路径（/ -> /cities），导致点击“返回”按钮时，路由会重新从 / 重定向到 /cities，使用户看起来无法退出 CityList 页面。

加上 replace 后，Navigate 的行为是替换 / 路由，不再保留 / 在历史记录中，这样浏览器返回按钮就不会触发从 / 重定向到 /cities 的循环。

四、NavLink 和Link

<Link> 是 React Router 中的基础组件，用来创建页面之间的导航链接。它的功能类似于传统的 HTML <a> 标签，但不会引起页面的完整刷新，而是使用 React Router 的路由机制进行无刷新跳转。

<NavLink> 是继承自 <Link> 的组件，除了拥有 <Link> 的所有功能外，还可以动态添加样式和类名来表明当前链接是否处于“选中”状态。它的主要作用是为导航链接添加激活状态，例如当前页面对应的导航项可以显示为高亮。

五、params参数

params 是 React Router 中路由参数的一个对象，通常用于获取 URL 中的动态部分（路径参数）。在示例代码中，params 是通过 loader 函数的参数对象解构出来的，用来获取 URL 路径中的动态数据，比如 orderId。

export async function loader({ params }) {
  const order = await getOrder(params.orderId);
  return order;
}

params 对象包含当前路由路径中定义的动态路径参数。在路由配置中使用了类似 /order/:orderId 的路径时，React Router 会将 URL 中对应的 orderId 提取出来，并将其放入 params 对象中。

六、React Router Actions

在 React Router v6 中，Actions 是处理表单提交或其他事件时发送数据到服务器的机制，通常和路由中的 action 函数结合使用。action 用于在特定路由下处理非 GET 请求（例如 POST、PUT、DELETE），在表单提交时或通过 JavaScript 发起的请求中使用。

（1）基本概念

action 函数: 用于处理表单提交或其他需要更改数据的请求。它类似于 loader 函数，但专注于处理提交的数据并更新服务器端的状态。action 函数会接收到一些上下文信息（如表单数据和请求参数），并可以返回结果或错误。

useSubmit(): React Router 提供的一个钩子，用来在表单提交时使用 JavaScript 来处理提交操作，避免刷新页面。

（2）action的基本用法

详细例子请见14节第九模块

action 函数:

• 参数 request: action 函数会接收到请求对象 request，包含提交表单的数据、请求类型（如 POST、PUT 等）和其他信息。
• request.formData(): 通过 request.formData() 可以获取表单中的数据。
• saveOrder(order): 你可以在 action 中进行服务器端操作，比如保存数据或发送 API 请求。
• 返回结果: action 函数可以返回处理结果，这些结果可以传递给组件进行渲染。

（3）使用表单与 action

React Router v6 提供了 Form 组件，它会自动与 action 函数配合，提交表单数据而不触发页面刷新。

< Form method="POST" action="/order/new" >

action指定提交到哪里，默认是最近路由

（4）传统表单提交 vs. 编程方式提交

在传统表单提交中，用户必须填写表单并点击“提交”按钮来触发提交操作。

通过编程方式提交表单，表单可以在不需要用户点击提交按钮的情况下被自动提交。可以在其他操作或事件触发时提交表单。通过编程方式提交表单意味着可以使用代码来触发表单提交操作，而不是让用户点击提交按钮。这种灵活性允许用户根据应用逻辑自动执行表单提交，提升用户体验和交互性。

使用场景：

1. 自动保存：当用户修改某个输入字段时，表单可以立即通过编程方式提交并保存数据，而无需点击“保存”按钮。
2. 异步数据提交：你可以在某个事件（如点击、鼠标移开、定时器）发生时，自动提交表单数据进行验证或保存。
3. 根据条件自动提交：表单可以在某个后台逻辑验证通过或某个条件满足后自动提交，而不让用户手动提交。

其他补充

useEffect(
  function () {
    if (isAuthenticated) navigate("/app", { replace: true });
  },
  [isAuthenticated, navigate]
);

代码段实现了当网页刷新或者断线导致状态变为未登录时，会自动跳转到app主界面的功能