介绍
React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它的设计目的是使代码更加可组合、可重用和易于维护。React 的核心思想是组件化，将界面分解成独立的部分，每个部分都有自己的状态和行为，这些部分可以组合在一起形成完整的用户界面。
React Router 是 React 中用于处理路由的库，它可以帮助我们构建单页面应用（SPA）。单页面应用是指只有一个 HTML 页面，但是在这个页面中可以通过 JavaScript 动态地加载不同的内容，从而实现不同的页面效果。React Router 的作用就是帮助我们在单页面应用中处理路由，使得用户能够在不同的页面之间进行切换。
在本文中，我们将介绍如何使用 React16 和 React Router4 来开发单页面应用。我们将从基础概念开始，逐步深入，直到能够开发出完整的单页面应用。
基础概念
组件
在 React 中，组件是构建用户界面的基本单位。每个组件都有自己的状态和行为，可以接收输入数据（称为 props）并渲染出对应的输出界面。组件可以嵌套在一起，形成复杂的界面结构。
下面是一个简单的 React 组件的例子：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- ------- --------------- -
-------- -
------ ----------- -------------------------
-
-
------ ------- ------这个组件接收一个名字作为输入，输出一个包含名字的问候语。我们可以在其他组件中使用它，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------
----- --- ------- --------------- -
-------- -
------ ------ ------------ ---
-
-
------ ------- ----这个组件将会渲染出 Hello, Alice!。
JSX
在 React 中，我们使用 JSX 来描述组件的结构。JSX 是一种类似 HTML 的语法，但是它可以嵌入 JavaScript 代码，使得我们可以在组件中编写逻辑。
下面是一个使用 JSX 的例子：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- ------- --------------- -
-------- -
------ ----------- -------------------------
-
-
------ ------- ------在这个例子中，我们使用了类似 HTML 的标签来描述组件的结构，但是我们可以在标签中嵌入 JavaScript 代码，例如 {this.props.name} 就是一个 JavaScript 表达式，它会被动态地计算出来并渲染到组件中。
路由
在单页面应用中，我们需要使用路由来处理不同的页面效果。React Router 是 React 中用于处理路由的库，它可以帮助我们实现单页面应用中的路由功能。
React Router 4 中的路由使用 Route 组件来定义。Route 组件可以接收以下几个属性：
- path：表示路由的路径，例如
/home。 - component：表示路由对应的组件，例如 Home。
- exact：表示是否精确匹配路径，例如
/home和/home/是否匹配。
下面是一个简单的使用 React Router 的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ---- ------- --------------- -
-------- -
------ --------- -- ---- ------------
-
-
----- ----- ------- --------------- -
-------- -
------ --------- -- ----- ------------
-
-
----- --- ------- --------------- -
-------- -
------ -
--------
-----
----
--------- -----------------------
--------- -----------------------------
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
---------
--
-
-
------ ------- ----在这个例子中，我们使用了 BrowserRouter 来作为路由的容器，使用 Link 来定义路由链接。当用户点击链接时，React Router 会自动渲染对应的组件。在这个例子中，我们定义了两个路由，一个是 /，对应的组件是 Home；另一个是 /about，对应的组件是 About。
开发单页面应用
安装依赖
在开始开发单页面应用之前，我们需要安装 React、React Router 和 Webpack 等依赖。可以使用以下命令来安装：
npm install react react-dom react-router-dom webpack webpack-dev-server babel-core babel-loader babel-preset-env babel-preset-react --save-dev
配置 Webpack
在安装完依赖之后，我们需要配置 Webpack 来处理 React 和 React Router 的代码。可以使用以下的 Webpack 配置：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ------- ---------
--
--
--
--
--
--这个配置文件定义了入口文件为 src/index.js，输出文件为 dist/bundle.js。同时还定义了 Webpack Dev Server 的配置，可以在开发过程中自动更新页面。最后，我们还需要使用 babel-loader 来处理 React 和 React Router 的代码，以便将它们转换成浏览器可以识别的代码。
定义路由
在开始编写组件之前，我们需要先定义好路由。这里我们定义了三个路由，分别对应三个页面：首页、用户列表页和用户详情页。我们将它们定义在 src/routes.js 文件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------
------ ---- ---- --------------------
------ -------- ---- ------------------------
------ ---------- ---- --------------------------
----- ------ - -- -- -
--------
------ ----- -------- ---------------- --
------ ----- ------------- -------------------- --
------ ----------------- ---------------------- --
---------
--
------ ------- -------在这个文件中，我们使用了 Switch 组件来包含所有的 Route 组件。Switch 组件的作用是只渲染第一个匹配到的路由，这样可以避免多个路由同时匹配的问题。我们还定义了三个路由，它们分别对应三个组件：Home、UserList 和 UserDetail。其中 UserDetail 还使用了动态路由来匹配用户的 ID。
编写组件
在定义好路由之后，我们可以开始编写组件了。这里我们定义了三个组件，分别对应三个页面：首页、用户列表页和用户详情页。我们将它们分别定义在 src/components/Home.js、src/components/UserList.js 和 src/components/UserDetail.js 文件中。
Home 组件
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- ------- --------------- -
-------- -
------ -
-----
----------- -- -- -------------
------- -- --- ---- ---------
------
--
-
-
------ ------- -----Home 组件是一个简单的欢迎页面，它包含一个标题和一段文字。
UserList 组件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
----- -------- ------- --------------- -
----- - -
------ ---
--
------------------- -
---------------------------------------------------
--------- -- -----------
----------- -- -
--------------- ----- ---
---
-
-------- -
----- - ----- - - -----------
------ -
-----
-------- ---------
----
--------------- -- -
--- --------------
----- -------------------------------------------
-----
---
-----
------
--
-
-
------ ------- ---------UserList 组件是一个用户列表页面，它会从一个 API 中获取用户列表并显示出来。在渲染用户列表时，我们使用了 Link 组件来定义用户详情页的链接。
UserDetail 组件
-- -------------------- ---- -------
------ ----- ---- --------
----- ---------- ------- --------------- -
----- - -
----- -----
--
------------------- -
----- - ----- - - -----------
----- - -- - - -------------
---------------------------------------------------------
--------- -- -----------
---------- -- -
--------------- ---- ---
---
-
-------- -
----- - ---- - - -----------
-- ------- -
------ ----------------------
-
------ -
-----
--------------------
--------- ----------------
--------- ----------------
------
--
-
-
------ ------- -----------UserDetail 组件是一个用户详情页面，它会从一个 API 中获取用户的详细信息并显示出来。在获取用户信息时，我们使用了动态路由来匹配用户的 ID。
渲染应用
在定义好路由和组件之后，我们可以开始渲染应用了。我们将渲染代码放在 src/index.js 文件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------ - ---- -------------------
------ ------ ---- -----------
----------------
--------
------- --
----------
-------------------------------
--在这个文件中，我们使用了 BrowserRouter 来作为路由的容器，使用 Routes 组件来定义所有的路由。最后，我们使用 ReactDOM.render 方法将应用渲染到页面中。
运行应用
在完成了上述步骤之后，我们可以使用以下命令来运行应用：
npm run start
这个命令会启动 Webpack Dev Server，使得我们可以在浏览器中访问应用。例如，我们可以访问 http://localhost:9000/ 来查看首页，访问 http://localhost:9000/users 来查看用户列表页面，访问 http://localhost:9000/users/1 来查看用户详情页面。
总结
在本文中，我们介绍了如何使用 React16 和 React Router4 来开发单页面应用。我们从基础概念开始，逐步深入，直到能够开发出完整的单页面应用。希望本文能够对您有所帮助，如果您有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6553236fd2f5e1655dcd4d55