在现代 Web 应用程序开发中，单页应用程序已经成为一种非常流行的解决方案。React 作为当今最受欢迎的前端框架之一，React-Router 作为 React 的官方路由器，结合使用可以轻松地构建高性能和易于维护的单页应用程序。本教程将介绍如何利用 React 和 React-Router 打造一个简单的单页应用程序。
应用程序概述
我们将从一个简单的示例开始，这个示例是一个简单的 To-Do 应用程序。该应用程序将有以下功能：
- 显示任务列表
- 添加任务
- 删除任务
环境准备
首先，我们需要确保在你的本地系统安装了 Node.js 和 npm，如果没有的话，你需要先安装它们。安装完成后，打开终端窗口并运行以下命令：
npm install -g create-react-app
此命令将安装 create-react-app 工具，这个工具可以帮助我们快速创建基于 React 的单页应用程序。安装完成后，我们就可以使用 create-react-app 命令来创建我们的项目了。在终端窗口中，运行以下命令：
create-react-app todo-app
此命令将在当前目录下创建一个名为 todo-app 的新项目。创建过程可能需要几分钟时间，具体时间取决于你的网络连接速度和系统性能。安装完成后，进入新创建的项目目录，并启动开发服务器：
cd todo-app npm start
运行此命令后，开发服务器将启动，并在默认浏览器中打开应用程序。如果浏览器没有自动打开，可以手动在浏览器中输入地址 http://localhost:3000 进入应用程序。
在我们开始编码之前，让我们简单地审查一下应用程序的目录结构。我们将主要使用两个目录：src 和 public。src 目录包含应用程序的源代码，public 目录包含静态资源文件。在 src 目录中，我们有一个名为 index.js 的文件，这个文件是整个应用程序的入口点。我们还有一个名为 App.js 的文件，这个文件是应用程序的根组件。我们将在这个组件中开发我们的应用程序。
创建路由
首先，我们需要为应用程序创建路由。React-Router 提供了一个名为 BrowserRouter 的组件，可以方便地帮助我们管理应用程序中的路由。我们需要安装 React-Router 并将其添加为项目依赖项。在终端窗口中，运行以下命令：
npm install --save react-router-dom
添加完成后，我们需要修改 App.js 文件以引入 BrowserRouter 并为应用程序添加路由。打开 App.js 文件，并将其重构成如下所示的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- -- ------- ------ ----- ---- -------------------
------ ------------
-------- ----- -
------ -
--------
---- ----------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
---------
--
-
-------- ------ -
------ -
-----
-------------
------
--
-
-------- ------- -
------ -
-----
--------------
------
--
-
-------- --------- -
------ -
-----
----------------
------
--
-
------ ------- ----在这个代码中，我们首先引入了 BrowserRouter 和 Route 组件以及 Link 组件。BrowserRouter 是我们用来包装整个应用程序的路由器组件，Route 组件用于定义路由，而 Link 组件用于定义路由链接。在 render 函数中，我们将整个应用程序包装在 BrowserRouter 组件之中，并在其中定义了三个路由。Route 组件接受两个 props：path 和 component。path 用于指定路由匹配的 URL，component 用于指定与该路由匹配的组件。我们还定义了三个组件，每个组件将显示一个标题。
路由定义完成后，我们需要修改一下样式，使得应用程序看起来更美观。打开 App.css 文件，并将其修改为如下所示的代码：
-- -------------------- ---- ------- ---- - ------------ ----------- ----------- ------- - --- - ----------------- -------- -------- ----- - --- -- - ----------- ----- -------- ------------- ------- -- -------- -- - --- -- -- - -------- ------------- - --- -- -- - - ---------------- ----- ------ ----- ------------- ----- - --- -- -- ------- - ------ ----- -
保存修改后，重新启动开发服务器，并在浏览器中查看应用程序。现在，应用程序应该已经渲染了各自的页面，并实现了基本的路由导航。接下来，我们将为该应用程序添加更多功能。
开发任务列表组件
在我们开始开发 To-Do 应用程序之前，让我们先梳理一下我们期望达成的目标。该应用程序将具有以下功能：
- 显示任务列表
- 添加任务
- 删除任务
现在，让我们开始开发任务列表组件。我们将创建一个名为 TodoList 的新组件，并在其中显示任务列表。打开 src 目录，并创建一个名为 components 的新目录。在此目录中创建一个名为 TodoList.js 的新文件，然后在其中添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ----------------- -
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-在这个代码中，我们首先定义了一个名为 TodoList 的新组件。这个组件接受一个名为 items 的 prop，该 prop 是一个由任务对象组成的数组。在组件的 render 函数中，我们使用 map 方法遍历每个任务，并在列表中显示它们的文本。我们为每个列表项添加了一个名为 key 的唯一属性，以帮助 React 跟踪列表项的更改。接下来，我们需要将这个组件添加到我们的应用程序中。
显示任务列表
要显示任务列表，我们需要将任务数据添加到应用程序中，并在 TodoList 组件中读取这些数据。我们将使用 React 的 useState hook 来管理应用程序中的任务数据。打开 App.js 文件，并将其修改为如下所示的代码：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ -------------- -- ------- ------ ----- ---- -------------------
------ ------------
------ -------- ---- ------------------------
-------- ----- -
----- ------- --------- - ----------
---- -- ----- ---- ------------
---- -- ----- ---- --------
---- -- ----- ----- --- --------
---
------ -
--------
---- ----------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
------
--------
-----
---------- -- --------- ------------- ---
--
------ ------------- ----------------- --
------ --------------- ------------------- --
------
---------
--
-
-------- ------- -
------ -
-----
--------------
------
--
-
-------- --------- -
------ -
-----
----------------
------
--
-
------ ------- ----在这个代码中，我们首先使用 useState hook 定义了一个名为 items 的 state 变量，该变量包含三个任务项。在 App 组件的 render 函数中，我们通过将 items 数组作为 props 传递给 TodoList 组件来渲染任务列表。我们使用 Route 组件将 TodoList 组件与 URL / 关联起来，这意味着当用户访问根 URL 时，该组件将被渲染。
现在，我们重新启动开发服务器，并在浏览器中访问应用程序。应用程序现在应该显示任务列表，并显示我们在之前定义的三个任务。
添加任务
接下来，我们需要允许用户添加新的任务。为此，我们将添加一个表单，该表单允许用户输入新的任务。在 App.js 文件中，我们将添加一个名为 AddTodo 的新组件，并在其中添加表单。打开 App.js 文件，并将其重构为如下所示的代码：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ -------------- -- ------- ------ ----- ---- -------------------
------ ------------
------ -------- ---- ------------------------
-------- ----- -
----- ------- --------- - ----------
---- -- ----- ---- ------------
---- -- ----- ---- --------
---- -- ----- ----- --- --------
---
----- ------ -------- - -------------
-------- ------------------- -
----------------------------
-
-------- ------------------- -
-----------------------
------------------- ---- ----------- --------
------------
-
------ -
--------
---- ----------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
------
--------
-----
---------- -- -
--
--------- ------------- --
----- ------------------------
------
-----------
------------------ --- -----
------------
-----------------------
--
------- ----------------- -------------
-------
---
--
--
------ ------------- ----------------- --
------ --------------- ------------------- --
------
---------
--
-
-------- ------- -
------ -
-----
--------------
------
--
-
-------- --------- -
------ -
-----
----------------
------
--
-
------ ------- ----在这个代码中，我们添加了一个名为 AddTodo 的新组件，并将其渲染为 TodoList 组件下面的表单。我们还定义了一个名为 text 的 state 变量，该变量存储用户在输入框中输入的值。我们为输入框添加了一个 onChange 事件处理程序，以便在用户输入时更新 text 变量。我们还定义了一个名为 handleSubmit 的函数，该函数在用户提交表单时将新任务添加到任务列表中。在 handleSubmit 函数中，我们调用 setItems 函数以通过使用解构更新运算符将新任务添加到 items 列表中。我们还清除了输入框的文本。
最后，我们需要将 TodoList 组件修改为接受两个 props：items 和 removeItem。removeItem 函数将在下一部分中定义，并用于允许用户删除任务。打开 TodoList.js 文件，并将其修改为如下所示的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ---------------- ------------ -
------ -
----
--------------- -- -
--- --------------
-----------
------- ----------- -- ---------------------------------
-----
---
-----
--
-在这个代码中，我们将 removeItem 函数作为额外的 props 传递给组件，并为每个任务项添加了一个“Delete”按钮。单击此按钮将调用 removeItem 函数并将与该项关联的任务对象作为参数传递。
删除任务
为了实现删除任务的功能，我们需要在 App.js 文件中定义一个名为 removeItem 的新函数，并将其传递到 TodoList 组件中。打开 App.js 文件，并将其重构为如下所示的代码：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ -------------- -- ------- ------ ----- ---- -------------------
------ ------------
------ -------- ---- ------------------------
-------- ----- -
----- ------- --------- - ----------
---- -- ----- ---- ------------
---- -- ----- ---- --------
---- -- ----- ----- --- --------
---
----- ------ -------- - -------------
-------- ------------------- -
----------------------------
-
-------- ------------------- -
-----------------------
------------------- ---- ----------- --------
------------
-
-------- ---------------- -
----- -------- - -------------- -- ---- --- ---------
-------------------
-
------ -
--------
---- ----------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
------
--------
-----
---------- -- -
--
--------- ------------- ----------------------- --
----- ------------------------
------
-----------
------------------ --- -----
------------
-----------------------
--
------- ----------------- -------------
-------
---
--
--
------ ------------- ----------------- --
------ --------------- ------------------- --
------
---------
--
-
-------- ------- -
------ -
-----
--------------
------
--
-
-------- --------- -
------ -
-----
----------------
------
--
-
------ ------- ----在这个代码中，我们首先定义了一个名为 removeItem 的新函数。该函数接受一个名为 item 的参数，该参数是要删除的任务对象。在函数中，我们使用 filter 方法创建一个新数组，该数组排除与要删除的任务对象相同的项。我们将这个新数组传递给 setItems 函数以更新应用程序中的状态变量。最后，我们将 removeItem 函数作为额外的 props 传递给 TodoList 组件。
到此为止，应用程序已经完成了。现在，我们可以重新启动开发服务器并在浏览器中查看应用程序。您应该可以看到任务列表，且可以添加或删除任务。
总结
这篇文章介绍了如何使用 React 和 React-Router 创建一个 To-Do 单页应用程序。在这个应用程序中，我们使用了 React 的 useState hook、BrowserRouter 组件和 Route 组件，以及 React-Router 的 Link 组件、match 方法和 withRouter 函数。我们还展示了如何在 React 应用程序中添加和删除项目。我们希望这篇文章对你有所帮助，可以让你更好的了解 React 和 React-Router，以及如何创建单页
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f879c1f6b2d6eab307f511