如何在 ReactJS 中重定向到另一个页面？

在 ReactJS 中，当我们需要将用户从一个页面移动到另一个页面时，我们可以使用内置的 React Router 库，该库专门用于处理 React 应用程序内部的导航。

方法概述

• 使用 Navigate 组件： 在 React Router v6 中，Navigate 组件帮助我们轻松地将用户从一个路由重定向到另一个路由。它是声明式的，这意味着我们可以直接在组件内部设置重定向。
• 声明式重定向： 我们可以直接在组件的渲染逻辑中处理重定向，使其简单易懂。
• 使用 useNavigate 进行编程式导航：为了获得更多的控制权，我们可以使用 useNavigate 钩子根据特定的操作或条件（如表单提交或状态更改）重定向用户。这使我们的应用程序能够实现动态导航。

重定向到另一个页面的步骤

第 1 步： 使用以下命令创建一个基本的 React 应用程序。

npm create-react-app myreactapp
cd myreactapp

第 2 步： 使用以下命令安装所需的依赖项。

npm i react-router-dom

项目结构： 创建组件后，项目结构将如下所示

!image文件夹结构

依赖项：

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
}

现在让我们通过示例来理解这一点：

App.js


CODEBLOCK_46596710


Home.js


CODEBLOCK_09ce6664


About.js


CODEBLOCK_72d8b874


ContactUs.js


CODEBLOCK_46794420

输出结果
在此示例中

• 使用 React Router 设置路由。
• 为 Home、About 和 Contact Us 页面定义路由。
• 如果路由不匹配任何定义的路径，则重定向到 Home 页面。
• 显示指向 Home、About 和 Contact Us 页面的导航链接。
• 当访问 /about 路由时，显示 "About Page" 标题。
• 当访问 /contactus 路由时，显示 "Contact Us Page" 标题。

在 ReactJS 中重定向的方法

1. 使用 进行导航

React 中页面导航最常见的方法是使用 React Router 提供的 组件。该组件的工作方式类似于常规 HTML 中的锚点 () 标签，但可以防止整个页面重新加载。