React-Router 是 React 的一款常用路由库，它能够帮助我们在 SPA（单页应用）中实现页面的路由跳转。使用 React-Router 编写的代码易于维护和扩展，同时可让 URL 与视图进行有效的绑定。本文将介绍 React-Router 在 SPA 应用中的使用技巧。
安装和基本使用
使用 React-Router 需要先安装依赖包（请确保您已经安装了 Node.js 和 npm）：
npm install react-router-dom --save
安装完成后，我们可以开始使用 React-Router。React-Router 为我们提供了 BrowserRouter、HashRouter 和 MemoryRouter 三种类型的路由容器，其中 BrowserRouter 使用 HTML5 history API，在支持 HTML5 history API 的现代浏览器中表现最好。HashRouter 使用 URL 中的哈希值进行跳转，适用于不支持 HTML5 history API 的浏览器。MemoryRouter 则将路由信息保存在内存中，适用于不需要将路由信息保存在 URL 中的场景。
我们可以通过如下代码创建一个简单的应用：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- ------- - -- -- -----------------
----------------
--------
-----
-----
----
----
----- ------------------
-----
----
----- -------------------------
-----
----
----- -----------------------------
-----
-----
------
------ -------- ----- ---------------- --
------ -------------- ----------------- --
------ ---------------- ------------------- --
------
----------
-------------------------------
--在这个简单的应用中，我们创建了三个组件 Home、About 和 Contact 分别代表不同的页面。我们通过导航栏并配合 Link 组件实现页面之间的切换，同时对应的路由规则则通过 Route 组件进行定义。其中 exact 属性用于确保只在路径完全匹配时才渲染对应组件。
动态路由和参数传递
在实际开发中，我们状态需要根据不同的页面传递参数，在 React-Router 中我们可以通过动态路由和 URL 参数来实现。我们可以通过在路由路径字符串中添加 :id 等变量来实现动态路由，通过 this.props.match.params.id 获取 URL 参数。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- ------- - -- -- -----------------
----- ---- - -- ----- -- -- -------- --- -----------------------
----------------
--------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
----
----- ------------------ --------
-----
----
----- ------------------ --------
-----
-----
------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ ----------------- ---------------- --
------
----------
-------------------------------
--嵌套路由
在复杂的应用中，我们可能需要通过嵌套路由来划分不同的页面层级。React-Router 允许我们在组件中嵌套 Route 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- ------- - -- -- -----------------
----- ----- - -- ----- -- -- -
-----
--------------
----
----
----- ------------------------------------------
-----
----
----- --------------------------------------------
-----
-----
------
------------------------------
---------- -- -----------------
--
------
-------------------------------
---------- -- ------------------
--
------
--
----------------
--------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
----
----- ------------------------
-----
-----
------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ ------------- ----------------- --
------
----------
-------------------------------
--在这个例子中，我们创建了一个嵌套路由，包含了 Profile 和 Settings 两个子页面。我们通过 match.url 和 match.path 来计算子路由的 URL。
总结
React-Router 是构建 React 单页应用的常用工具，应用广泛且非常易于上手。在实际开发中，如果你需要实现单页应用，React-Router 是一个非常好的选择。本文介绍了 React-Router 在 SPA 应用中的使用技巧，包括基本使用、动态路由和参数传递、嵌套路由等。我们希望通过本文，读者能够更加深入地了解 React-Router，从而在实际项目中能够更加熟练地运用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ae6d2968c7c53b06832b7