React 是目前最受欢迎的 JavaScript 库之一，用于构建现代 Web 应用程序。React-Router 是一个基于 React 的路由库，用于在单页应用程序（SPA）中实现页面的导航和展示。本文将介绍如何使用 React 和 React-Router 结合实现 SPA 应用程序的最佳实践。
1. 基本组件结构
SPA 应用大多数情况下都是由多个组件构成的，因此，组织和管理组件结构会让我们能够更好地维护代码。为了达到良好的组件结构，以下是一些最佳实践：
- 拆分应用程序
- 单一职责原则
- 容器组件和纯组件
- 避免嵌套过深的层次结构
我们需要明确指定每个组件的功能，只让它做它应该做的事情。尽可能减少关注点和复杂性。
例如，组件 Sidebar.js 可以用以下方式定义：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
-------- -
------ ---- --------------------------- --------------
-
-
------ ------- --------这里，我们只关注了 Sidebar 组件，它的主要职责是渲染侧边栏的内容。
2. 路由设置
SPA 应用程序中的路由应该负责不同组件之间的导航。React-Router 是一个流行的路由库，它可以帮助我们轻松地定义应用程序的路由。以下是一些最佳实践：
- 使用 react-router-dom 包
- 在 Router 组件外层包裹 BrowserRouter 组件
- 使用 Switch 组件确保只有一个路由匹配
- 将404页面配置为无路径路由
例如，我们可以将 App.js 的代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ------ ------ - ---- -------------------
------ ------- ---- ------------
------ ---- ---- ---------
------ ----- ---- ----------
------ -------- ---- -------------
----- --- ------- --------------- -
-------- -
------ -
---------------
---- ----------------
-------- --
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ -------------------- --
---------
------
----------------
--
-
-
------ ------- ----这里，我们使用了 BrowserRouter 来包装应用程序，并在其中定义了三个路由：首页、关于页和 404 页。使用 Switch 组件来确保只有一个匹配到的路由会被渲染。
3. 路由使用
一旦我们定义好了路由，我们就可以在 React 的组件中使用它们了。以下是一些最佳实践：
- 使用 Link 组件链接到不同的路由
- 使用 withRouter 来在组件中获取路由信息
- 在选项卡切换时不要使用 history.push，应该使用 Link 组件
例如，在 Sidebar.js 中，我们可以使用以下代码来添加链接：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
----- ------- ------- --------------- -
-------- -
------ -
---- --------------------
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
--
-
-
------ ------- --------这里，我们使用了 Link 组件来进行路由链接。这种方式可以确保使用多个选项卡时 URL 的正确传递。
结论
React + React-Router 是构建现代 SPA 应用程序的最佳实践之一。本
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67551bbd1b963fe9cc520056