在现代 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 文件，并将其重构成如下所示的代码：
// javascriptcn.com 代码示例
import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import './App.css';
function App() {
return (
<Router>
<div className="App">
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Contact() {
return (
<div>
<h2>Contact</h2>
</div>
);
}
export default App;在这个代码中，我们首先引入了 BrowserRouter 和 Route 组件以及 Link 组件。BrowserRouter 是我们用来包装整个应用程序的路由器组件，Route 组件用于定义路由，而 Link 组件用于定义路由链接。在 render 函数中，我们将整个应用程序包装在 BrowserRouter 组件之中，并在其中定义了三个路由。Route 组件接受两个 props：path 和 component。path 用于指定路由匹配的 URL，component 用于指定与该路由匹配的组件。我们还定义了三个组件，每个组件将显示一个标题。
路由定义完成后，我们需要修改一下样式，使得应用程序看起来更美观。打开 App.css 文件，并将其修改为如下所示的代码：
// javascriptcn.com 代码示例
.App {
font-family: sans-serif;
text-align: center;
}
nav {
background-color: #f1f1f1;
padding: 20px;
}
nav ul {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: #000;
margin-right: 20px;
}
nav ul li a:hover {
color: #f00;
}保存修改后，重新启动开发服务器，并在浏览器中查看应用程序。现在，应用程序应该已经渲染了各自的页面，并实现了基本的路由导航。接下来，我们将为该应用程序添加更多功能。
开发任务列表组件
在我们开始开发 To-Do 应用程序之前，让我们先梳理一下我们期望达成的目标。该应用程序将具有以下功能：
- 显示任务列表
- 添加任务
- 删除任务
现在，让我们开始开发任务列表组件。我们将创建一个名为 TodoList 的新组件，并在其中显示任务列表。打开 src 目录，并创建一个名为 components 的新目录。在此目录中创建一个名为 TodoList.js 的新文件，然后在其中添加以下代码：
// javascriptcn.com 代码示例
import React from 'react';
export default function TodoList({items}) {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}在这个代码中，我们首先定义了一个名为 TodoList 的新组件。这个组件接受一个名为 items 的 prop，该 prop 是一个由任务对象组成的数组。在组件的 render 函数中，我们使用 map 方法遍历每个任务，并在列表中显示它们的文本。我们为每个列表项添加了一个名为 key 的唯一属性，以帮助 React 跟踪列表项的更改。接下来，我们需要将这个组件添加到我们的应用程序中。
显示任务列表
要显示任务列表，我们需要将任务数据添加到应用程序中，并在 TodoList 组件中读取这些数据。我们将使用 React 的 useState hook 来管理应用程序中的任务数据。打开 App.js 文件，并将其修改为如下所示的代码：
// javascriptcn.com 代码示例
import React, {useState} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import './App.css';
import TodoList from './components/TodoList';
function App() {
const [items, setItems] = useState([
{id: 1, text: 'Buy groceries'},
{id: 2, text: 'Pay bills'},
{id: 3, text: 'Take out trash'},
]);
return (
<Router>
<div className="App">
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Route
path="/"
exact
render={() => <TodoList items={items} />}
/>
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Contact() {
return (
<div>
<h2>Contact</h2>
</div>
);
}
export default App;在这个代码中，我们首先使用 useState hook 定义了一个名为 items 的 state 变量，该变量包含三个任务项。在 App 组件的 render 函数中，我们通过将 items 数组作为 props 传递给 TodoList 组件来渲染任务列表。我们使用 Route 组件将 TodoList 组件与 URL / 关联起来，这意味着当用户访问根 URL 时，该组件将被渲染。
现在，我们重新启动开发服务器，并在浏览器中访问应用程序。应用程序现在应该显示任务列表，并显示我们在之前定义的三个任务。
添加任务
接下来，我们需要允许用户添加新的任务。为此，我们将添加一个表单，该表单允许用户输入新的任务。在 App.js 文件中，我们将添加一个名为 AddTodo 的新组件，并在其中添加表单。打开 App.js 文件，并将其重构为如下所示的代码：
// javascriptcn.com 代码示例
import React, {useState} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import './App.css';
import TodoList from './components/TodoList';
function App() {
const [items, setItems] = useState([
{id: 1, text: 'Buy groceries'},
{id: 2, text: 'Pay bills'},
{id: 3, text: 'Take out trash'},
]);
const [text, setText] = useState('');
function handleChange(event) {
setText(event.target.value);
}
function handleSubmit(event) {
event.preventDefault();
setItems([...items, {id: Date.now(), text}]);
setText('');
}
return (
<Router>
<div className="App">
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Route
path="/"
exact
render={() => (
<>
<TodoList items={items} />
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Enter new task"
value={text}
onChange={handleChange}
/>
<button type="submit">Add Task</button>
</form>
</>
)}
/>
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Contact() {
return (
<div>
<h2>Contact</h2>
</div>
);
}
export default App;在这个代码中，我们添加了一个名为 AddTodo 的新组件，并将其渲染为 TodoList 组件下面的表单。我们还定义了一个名为 text 的 state 变量，该变量存储用户在输入框中输入的值。我们为输入框添加了一个 onChange 事件处理程序，以便在用户输入时更新 text 变量。我们还定义了一个名为 handleSubmit 的函数，该函数在用户提交表单时将新任务添加到任务列表中。在 handleSubmit 函数中，我们调用 setItems 函数以通过使用解构更新运算符将新任务添加到 items 列表中。我们还清除了输入框的文本。
最后，我们需要将 TodoList 组件修改为接受两个 props：items 和 removeItem。removeItem 函数将在下一部分中定义，并用于允许用户删除任务。打开 TodoList.js 文件，并将其修改为如下所示的代码：
// javascriptcn.com 代码示例
import React from 'react';
export default function TodoList({items, removeItem}) {
return (
<ul>
{items.map(item => (
<li key={item.id}>
{item.text}
<button onClick={() => removeItem(item)}>Delete</button>
</li>
))}
</ul>
);
}在这个代码中，我们将 removeItem 函数作为额外的 props 传递给组件，并为每个任务项添加了一个“Delete”按钮。单击此按钮将调用 removeItem 函数并将与该项关联的任务对象作为参数传递。
删除任务
为了实现删除任务的功能，我们需要在 App.js 文件中定义一个名为 removeItem 的新函数，并将其传递到 TodoList 组件中。打开 App.js 文件，并将其重构为如下所示的代码：
// javascriptcn.com 代码示例
import React, {useState} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import './App.css';
import TodoList from './components/TodoList';
function App() {
const [items, setItems] = useState([
{id: 1, text: 'Buy groceries'},
{id: 2, text: 'Pay bills'},
{id: 3, text: 'Take out trash'},
]);
const [text, setText] = useState('');
function handleChange(event) {
setText(event.target.value);
}
function handleSubmit(event) {
event.preventDefault();
setItems([...items, {id: Date.now(), text}]);
setText('');
}
function removeItem(item) {
const newItems = items.filter(i => i.id !== item.id);
setItems(newItems);
}
return (
<Router>
<div className="App">
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Route
path="/"
exact
render={() => (
<>
<TodoList items={items} removeItem={removeItem} />
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Enter new task"
value={text}
onChange={handleChange}
/>
<button type="submit">Add Task</button>
</form>
</>
)}
/>
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Contact() {
return (
<div>
<h2>Contact</h2>
</div>
);
}
export default App;在这个代码中，我们首先定义了一个名为 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