React 是目前最流行的前端框架之一，它让开发者可以轻松地构建复杂的交互式用户界面。而 React-Router 则提供了一种方便的方式来管理前端路由，让开发者可以更加轻松地实现页面之间的切换，使得网站能够更加流畅。
在本文中，我将向大家介绍 React-Router 的基础知识、路由配置以及一些常见的用法。通过阅读本文，你将能够轻松地在 React 中使用 React-Router 实现页面路由切换。
React-Router 基础知识
React-Router 是一个用于前端路由管理的库，它可以帮助我们在应用中进行页面之间的跳转。在使用 React-Router 之前，我们需要先安装它。可以通过 npm 来安装，如下所示：
npm install react-router-dom
React-Router 提供了三种基本的路由组件：BrowserRouter、HashRouter 和 MemoryRouter。通常我们会使用 BrowserRouter 和 HashRouter，其中 BrowserRouter 使用 HTML5 history API，并将所有的 URL 请求发送到服务器。而 HashRouter 则通过 URL hash 值来进行跳转。下面我们来了解一下如何使用 BrowserRouter。
我们可以在 React 的根组件中使用 BrowserRouter 组件来包裹 App 组件，如下所示：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
-------- ----- -
------ -
---------------
---
----------------
--
-路由配置
React-Router 的另一个重要概念是路由配置。路由配置是一个包含所有路由规则的对象，它告诉 React-Router 如何匹配 URL 并渲染正确的组件。
在 BrowserRouter 中需要使用 Route 组件来定义路由规则。下面是一个简单的路由配置示例，它定义了两个路由规则：
-- -------------------- ---- -------
------ - -------------- ----- - ---- -------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
-------- ----- -
------ -
---------------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
----------------
--
-在上面的代码中，exact 属性表示路径必须完全匹配。如果我们需要传递一些参数到路由组件中，我们可以使用 :param 这样的语法来指定参数，如下所示：
<Route path="/user/:id" component={User} />当用户访问 /user/1 时，User 组件将会被渲染，并能够访问到 props.match.params.id 这个参数。
常见的用法
除了基本的路由配置之外，React-Router 还提供了许多常见的用法，例如 Redirect、Link、NavLink 等组件。
Redirect 组件
Redirect 组件可以用来重定向到其他路径或 URL。例如，我们可以使用 Redirect 组件将根路径重定向到 home 路径上，如下所示：
-- -------------------- ---- -------
------ - -------------- ------ -------- - ---- -------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
-------- ----- -
------ -
---------------
------ ----- -------- ---------- -- --------- ---------- --- --
------ ------------ ---------------- --
------ ------------- ----------------- --
----------------
--
-Link 组件
Link 组件用于生成导航链接。例如，我们可以使用 Link 组件来导航到 home 路径上，如下所示：
-- -------------------- ---- -------
------ - -------------- ------ ---- - ---- -------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
-------- ----- -
------ -
---------------
-----
----
----
----- ----------------------
-----
----
----- ------------------------
-----
-----
------
------ ----- ------------ ---------------- --
------ ------------- ----------------- --
----------------
--
-NavLink 组件
NavLink 组件用于生成导航链接，并且支持设置激活样式。我们可以使用 activeClassName 属性来设置激活时的样式，如下所示：
-- -------------------- ---- -------
------ - -------------- ------ ------- - ---- -------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
-------- ----- -
------ -
---------------
-----
----
----
--------
-----
----------
------------------------
-
----
----------
-----
----
--------
-----------
------------------------
-
-----
----------
-----
-----
------
------ ----- ------------ ---------------- --
------ ------------- ----------------- --
----------------
--
-总结
React-Router 是一个强大的前端路由库，它可以帮助我们轻松地管理前端路由。在本文中，我们介绍了 React-Router 的基础知识、路由配置以及一些常见的用法。通过本文的学习，你现在已经可以在 React 中使用 React-Router 实现页面路由切换了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651cdf5095b1f8cacd4609b8