React-Router5 是一个强大的路由库，它是 React UI 应用程序中最流行的路由解决方案之一。它提供了多种路由选项和API，并且可以正确地管理您的应用程序的所有路由。本文将深入介绍使用 npm 包 react-router5 的实现方法。
安装 react-router5
要开始使用 react-router5，您需要先执行以下命令进行安装：
--- ------- ------------- ------
配置路由
要进行路由配置，您需要首先导入必要的 react-router5 组件和方法，以及您需要的任何组件。通常，您需要在一个 routes 对象上定义所有路由和子路由。
------ - --------------- ----- - ---- ----------------
------ ------------ ---- ----------
------ ---- ---- --------------------
------ ----- ---- ---------------------
------ ------- ---- -----------------------
----- ------ - ---------------
----- ------ - -
-
----- -------
----- ----
---------- ----
--
-
----- --------
----- ---------
---------- -----
--
-
----- ----------
----- -----------
---------- -------
-
--
-------------------------在这个例子中，我们定义了三个路由：一个主页路由 /，一个关于页面路由 /about 和一个联系我们页面路由 /contact。
渲染 App
要渲染您的组件和路由，请使用 RouterProvider 组件包装您的 App 组件，并将其传递给 RouterProvider 的 router props。
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- - ---- ----------------
------ --- ---- -------------------
----- --------- - -------------------------------
----------------
--------------- ----------------
---- --
------------------
---------
--在组件中使用 react-router5
要在组件中使用 react-router5，您需要使用 useRouter 来创建一个路由对象，并使用 useRoute 来获取当前路由状态。
------ ----- ---- --------
------ - --------- --------- - ---- ----------------
----- ---- - -- -- -
----- - ----- - - -----------
----- ------ - ------------
----- --------------- - -- -- -
-------------------------
--
------ -
--
-------------
-------------------
------- ---------------------------- -- --------------
---
--
--
------ ------- -----在这个例子中，我们使用了 useRoute 函数来获取当前路由状态，并使用 useRouter 函数来创建一个路由对象。我们还创建了一个 navigateToAbout 函数，该函数通过路由对象导航到“about”页面。我们还将当前路由名称渲染到页面中。
路由保护
如果您需要对某些路由进行保护，例如，某些页面只能在用户登录后访问，您可以使用 onActivate 方法。onActivate 方法会在每次激活路由时运行，如果该方法返回 false，则路由不会被激活。
----- ---------- - -- -- -
------ ---------------------------- --- -----
--
----- ------ - -
-
----- -------
----- ----
---------- ----
--
-
----- --------
----- ---------
---------- ------
----------- -- -- -
-- --------------- -
------------------------
------ ------
-
------ -----
-
--
-
----- ----------
----- -----------
---------- -------
-
--在这个例子中，我们在 About 路由上使用了 onActivate 方法。我们检查用户是否处于登录状态。如果用户未登录，则我们将其重定向到主页，并返回 false。
结论
本文中，我们已经深入介绍了如何在 React 应用程序中使用 react-router5。我们介绍了如何配置路由、渲染你的应用程序、访问路由对象以及使用 onActivate 方法来保护路由。这些方法应该可以让您建立强大的前端应用程序。如果您想进一步了解 react-router5，请查看其官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/the-react-router5