1. SPA 是什么？
SPA（Single-page application，单页应用）是一种提供更好用户体验的 Web 应用程序设计，它使用 AJAX 技术在 Web 页面中异步地加载数据，让用户不必跳转页面即可在同一页面中享受完整的应用体验。
2. 为什么使用 React 和 react-router？
React 是一个开源 JavaScript 库，拥有优秀的组件化和虚拟 DOM 技术，使得大型 Web 应用程序易于开发和维护。React-router 作为 React 中实现路由的组件，可以轻松地将 React 应用程序转变为 SPA。
3. 项目准备工作
3.1 安装并使用 create-react-app 创建项目
create-react-app 是一款公认的适用于 React 应用程序的脚手架工具，使用该工具可以快速构建、调试并发布 React 应用程序。
安装命令：
npm install -g create-react-app
创建项目命令：
create-react-app react-router-demo
启动项目命令：
cd react-router-demo npm start
3.2 安装并使用 react-router
安装命令：
npm install --save react-router-dom
引入命令：
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4. 编写 Demo
4.1 配置路由
在 src 目录下新建一个 router 目录，创建 index.js 文件，编写如下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------------- -- ------- ------ ---- - ---- ------------------- ------ ---- ---- ---------------- ------ ----- ---- ----------------- ----- ---------- - -- -- - -------- ----- ---- ---- ----- ---------------- ----- ---- ----- ----------------------- ----- ----- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- ------ --------- -- ------ ------- -----------展开代码
4.2 编写首页
在 src/views 目录下新建 home.js 文件，编写如下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ---- - -- -- - ----- ----------------- ------ -- ------ ------- -----展开代码
4.3 编写关于我们
在 src/views 目录下新建 about.js 文件，编写如下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ----- - -- -- - ----- ------------- ----------- --- ------------------------ ------ -- ------ ------- ------展开代码
4.4 引入路由
在 src/App.js 中，引入路由组件：
import BasicRoute from "./router";
在 App 组件中，把 BasicRoute 组件作为根组件：
function App() { return ( <div className="App"> <BasicRoute /> </div> ); }
最后启动项目，即可看到在页面上成功实现了两个路由之间的切换。
5. 综述
本文通过介绍如何使用 React 和 react-router 实现 SPA 应用，详细讲解了如何安装和配置 React、react-router，并编写了一个简单的 Demo 实现了路由之间的切换。希望读者可以通过这篇文章深入学习 React 和 react-router，更好地应用于实际开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ba9709306f20b3a697a252
