React Router 是 React 应用中最流行的路由库之一，它可以让你在单页应用 (SPA) 中管理 URL，从而实现页面间的切换和状态管理。本文将介绍 React Router v4 的基础使用方法，包括路由的定义、渲染、传参和重定向等。
安装和基本概念
在使用 React Router 之前，你需要先安装它。可以使用 npm 进行安装：
npm install react-router-dom
安装完成后，在你的 React 应用中导入相应的模块：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'- Router 是 React Router 的根组件，它会处理 URL 和页面切换的逻辑。
- Route 是 Route 对应的组件和路径的映射关系，它用于定义匹配某个 URL 的页面组件。
- Link 是一个 React 组件，它生成一个具有正确的 href 属性的 元素，使得点击它后可以切换到相应的路由。
定义路由
在 React Router 中，定义路由通常采用 Route 组件的 path 属性来实现。你可以将 path 属性设置为一个字符串，也可以通过正则表达式来匹配 URL。下面是一个简单的例子：
-- -------------------- ---- -------
--------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- --------------------------
-----
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ -------------- ------------------ --
------
---------在上面的例子中，我们定义了三个路由：/、/about 和 /topics，分别对应了三个组件：Home、About 和 Topics。
注意到我们在 Link 和 Route 组件中都用到了 to 属性，这是因为在 React Router v4 中，所有的 URL 都以 to 属性的形式定义。因此，我们将 to 对应的路径传入 Link 组件来生成一个跳转链接，然后在 Route 组件中用 path 属性指定相应的路由路径。
另外，我们在 Home 路由中加上了 exact 属性，表示只有当 URL 完全匹配到 / 的时候才会渲染对应的组件。
路由渲染
当 URL 发生变化时，React Router 会根据 Route 组件的 path 属性去寻找一个匹配的路由，然后渲染对应的组件。在渲染时，React Router 会传递一些信息到对应的组件中，包括 location、history 和 match 等等。
- location 表示当前 URL 对应的信息，包括 pathname、search、hash 等等。
- history 是一个 API 对象，提供了 push 和 replace 方法，可以操作浏览器的历史记录，从而实现页面间的切换。
- match 表示当前 URL 和 Route 组件的匹配信息，包括 params、url 等等。
在组件中，你可以根据这些信息来渲染不同的 UI。
-- -------------------- ---- -------
-------- -------- ----- -- -
------ -
-----
---------------
----
----
----- ------------------------------------------------
-----
----
----- --------------------------------------- -- ------------
-----
-----
------ ------------------------------- ----------------- --
------
-----
-----------------
---------- -- ---------- ------ - ------------
--
------
--
-在上面的例子中，我们首先定义了两个子路由：/components 和 /props-v-state，然后在组件中通过 match 属性获取当前路由的路径和参数，从而生成相应的链接。
另外，我们还定义了两个嵌套的 Route 组件，分别用于匹配子路由和空路径，当用户访问 /topics 时，会渲染 Please select a topic.，而当用户访问 /topics/:topicId 时，则会渲染对应的 Topic 组件。这里需要注意的是，params 参数被封装在 props.match.params 中，可以通过它来获取子路由的参数。
路由传参
在实际开发中，你可能需要把一些数据传递到组件中，以便进行相应的渲染。这时，你可以使用 Route 组件的 render 属性来传递参数：
-- -------------------- ---- ------- ----- -------- - - - --- -- ----- -------- ------ ---- -- - --- -- ----- --------- ------ ---- -- - --- -- ----- --------- ------ ---- -- -- ------ ---------------- ---------- -- --------- ------------------- --- --
在上面的例子中，我们定义了一个名为 products 的数组，并通过 Route 组件的 render 属性将它传递给了 Products 组件。在 Products 组件中，你可以通过 this.props.products 来获取相应的数据。
另外，当需要进行动态路由传参时，可以使用 Route 组件的 path 属性来定义相应的路径。例如，在访问 /product/1 时，你可以通过以下方式传递参数：
<Route path="/product/:id" component={Product} />在 Product 组件中可以使用 this.props.match.params.id 来获取动态参数。
路由重定向
最后，如果你需要在 SPA 中使用重定向功能，可以使用 Redirect 组件来实现。例如，当用户访问 /login 时，你希望将他重定向到 /dashboard 页面，可以这样做：
-- -------------------- ---- -------
--------
-----
------
-----
-------------
---------- -- --------- --------------- ---
--
------ ----------------- --------------------- --
------
---------在上面的例子中，我们在 /login 路由中使用了 Redirect 组件，当用户访问它时会被重定向到 /dashboard 页面。
总结
本文简要介绍了 React Router v4 在 SPA 中的基础使用方法，包括路由的定义、渲染、传参和重定向等。当然，还有很多高级的用法和技巧，可以到官方文档中阅读更多详情。希望本文能够帮助你更好地掌握 React Router 在实际项目中的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6519b07695b1f8cacd1d40d4