已解决：如何在 React Router v6 中重定向

最后更新： 09/11/2023
作者： JavaScript 源码追踪

React Router v6 中与重定向相关的主要问题是重定向的语法与以前的版本相比发生了显着变化。 在 v6 中，必须使用 Redirect 组件而不是 元素，并且必须为 to 属性提供一个包含路径名属性的对象。 此外，任何其他属性（例如状态或查询参数）也必须包含在此对象中。 这会让习惯于使用 React Router 早期版本的简单语法的开发人员感到困难。

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

1. 从'react-router-dom'导入{重定向}；
– 此行从 react-router-dom 库中导入 Redirect 组件。

2.
– 该行创建了一个具有精确路径“/old-path”的路由组件。

3.
– 此行使用重定向组件从“/old-path”重定向到“/new-path”。

如何在 React Router v6 中重定向

v6

React Router v6 提供了一个 Redirect 组件，可用于将用户从一个页面重定向到另一个页面。 要使用 Redirect 组件，您需要从 react-router-dom 包中导入它。 Redirect 组件有两个属性：from 和 to。 “from”属性是当前页面的路径，“to”属性是您要将用户重定向到的页面的路径。 例如，如果您想将用户从 /homepage 重定向到 /about，您的代码将如下所示：

从'react-router-dom'导入{重定向}；

什么是反应路由器？

React Router 是 React 的路由库，允许开发人员创建具有导航和基于状态的动态路由的单页应用程序。 它有助于使 UI 与 URL 保持同步，使用户可以更轻松地共享 URL 和为 URL 添加书签。 React Router 还提供了强大的功能，如延迟加载、路由保护和位置转换处理。

反应中的路由器类型

React Router 是 React 的路由库，允许开发人员创建具有导航和 URL 路由的单页应用程序。 它提供了三种类型的路由器：BrowserRouter、HashRouter 和 MemoryRouter。

BrowserRouter：此路由器使用 HTML5 历史记录 API 使您的 UI 与 URL 保持同步。 当您想在应用程序中使用真实 URL 时使用它。

HashRouter：此路由器使用 URL 的哈希部分（即 #）来使您的 UI 与 URL 保持同步。 当您不想使用真实的 URL 或者当您需要与不支持 HTML5 历史 API 的旧浏览器兼容时，可以使用它。

MemoryRouter：此路由器在内存中保留位置历史记录，不与浏览器的地址栏交互或创建真实的 URL。 它可用于测试目的或不希望使用真实 URL 的环境（例如，服务器端呈现）。

相关文章：