路由的跳转在 Web 应用中经常出现，这是因为我们需要根据用户请求的路径和参数，动态地显示不同的页面或组件。React 是一种流行的前端框架，它提供了多种路由库用于解决这个问题。本文将介绍 React 中几个流行的路由库，并演示如何使用它们来处理路由跳转问题。
React 路由库
React 路由库有很多，其中最流行的是 react-router-dom，它是基于 react-router 的一种简化版本，用于 Web 应用。以下是几种常用的 React 路由库：
react-router：React 官方推荐的路由库，支持 Web 和 Native 应用。react-router-dom：基于react-router的 Web 应用路由库，支持BrowserRouter和HashRouter。react-router-native：基于react-router的 Native 应用路由库，支持NativeRouter。
我们本文将介绍 react-router-dom，以及它用于处理路由跳转问题的解决方案。
React 路由的基本用法
react-router-dom 提供了多种路由组件，其中最重要的是 Router 和 Route。我们需要在应用的入口处包裹一个 Router 组件，然后使用 Route 组件来定义路由规则。以下是一个简单的例子：
-- -------------------- ---- -------
------ - ------------- -- ------- ----- - ---- -------------------
-------- ----- -
------ -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
--
-在上面的例子中，BrowserRouter 是一个路由组件，它使用 HTML5 的 history API 来实现路由跳转。Route 组件用于匹配路径和渲染组件。在我们的示例中，路径是 /、/about 和 /contact，分别对应 Home、About 和 Contact 组件。
路由的三种跳转方式
在 React 中，我们可以使用多种方式来实现路由跳转。以下是三种常见的方式：
Link 组件
Link 组件是 react-router-dom 提供的一个用于跳转到指定路径的组件。它类似于 HTML 中的 a 标签，但是不会触发浏览器的刷新。
以下是一个使用 Link 组件的例子：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- -------- -
------ -
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
--
-在上面的例子中，我们使用 Link 组件来跳转到路由的不同路径。
Redirect 组件
Redirect 组件用于重定向到指定路径。当用户访问一个不存在的路径时，我们可以使用 Redirect 组件将用户重定向到其他路径。
以下是一个使用 Redirect 组件的例子：
-- -------------------- ---- -------
------ - -------- - ---- -------------------
-------- ----- -
------ -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
--------- ------ --
---------
--
-在上面的例子中，当用户访问任何一个不存在的路径时，我们将其重定向到 / 路径。
编程式导航
react-router-dom 还提供了一种编程式的路由跳转方式。我们可以使用 history 对象来实现这种方式。history 对象包含浏览器的历史记录，我们可以通过 history.push() 方法来将页面推到历史记录中。
以下是一个使用编程式导航的例子：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
-------- ------ -
--- ------- - -------------
-------- ------------- -
-----------------------
-
------ -
-----
------- ------------------------ -- ----- -------------
------
--
-在上面的例子中，我们在 Home 组件中使用 useHistory 钩子获取 history 对象。我们在组件中定义了一个 handleClick 方法，当用户单击按钮时执行跳转操作。
小结
本文介绍了 React 中常用的路由库，并演示了如何使用 react-router-dom 进行路由跳转。同时，我们介绍了路由的三种跳转方式：使用 Link 组件、使用 Redirect 组件和使用编程式导航。在实际开发中，不同的场景需要选择不同的跳转方式。希望本文能够帮助你在 React 中处理路由跳转问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6781fc00935627c900f26461
