系列回顾：
在前面的九篇文章中，我们已经系统地学习了React的方方面面：从创建项目，到State和Props，再到事件、列表、条件渲染、表单、API请求和CSS样式。我们已经能做出功能强大、交互丰富、外观精美的“单张”页面了。但是，一个完整的网站，比如博客或电商网站，通常包含多个页面，如首页、文章页、关于页等。用户需要在这些页面之间自由地切换。
欢迎来到我们《React入门教程》的收官之作！
今天，我们要解决的核心问题是：如何在一个React应用中实现多页面的导航和跳转？
你可能会想：这不就是用<a>标签吗？比如<a href="/about.html">。在传统的网站中确实是这样，但每次点击链接都会导致浏览器向服务器重新请求一个全新的HTML文件，整个页面会刷新，体验并不好。
在React这样的单页面应用 (Single Page Application, SPA) 中，我们有更好的方式。整个应用实际上只有一个HTML文件（index.html）。所谓的“页面跳转”，其实是在不刷新整个页面的前提下，通过JavaScript动态地卸载旧的组件，挂载新的组件，同时改变浏览器地址栏的URL，给用户一种切换了页面的“错觉”。
而实现这一切的业界标准库，就是 React Router。
第一步：安装 React Router
首先，我们需要把react-router-dom这个库安装到我们的项目中。打开你项目的终端，执行以下命令：
npm install react-router-dom
第二步：创建我们的“页面”组件
在开始配置路由之前，我们先得有几个可以用来跳转的“页面”。在React中，每一个页面其实就是一个组件。
- 在
src目录下，创建一个新的文件夹，命名为pages。 - 在
pages文件夹里，创建两个新的文件：HomePage.jsx和AboutPage.jsx。
src/pages/HomePage.jsx:function HomePage() { return ( <div> <h1>这是首页</h1> <p>欢迎来到我们的网站！</p> </div> ); } export default HomePage;src/pages/AboutPage.jsx:function AboutPage() { return ( <div> <h1>关于我们</h1> <p>我们是一个热爱React的开发团队。</p> </div> ); } export default AboutPage;
现在，我们有了两个简单的页面组件。
第三步：配置路由
配置路由的核心，就是告诉React Router：“当用户访问这个URL路径时，你应该显示那个组件”。
我们需要在应用的入口处（通常是main.jsx或App.jsx）来设置我们的路由规则。这里我们选择在App.jsx中进行。
修改 src/App.jsx:
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import './App.css';
function App() {
return (
// 1. 用 BrowserRouter 包裹整个应用
<BrowserRouter>
<div>
{/* 2. 创建导航链接 */}
<nav>
<ul>
<li>
<Link to="/">首页</Link>
</li>
<li>
<Link to="/about">关于我们</Link>
</li>
</ul>
</nav>
<hr />
{/* 3. 定义路由规则 */}
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
代码解释 (这是本篇的重中之重):
import { ... } from 'react-router-dom';: 我们从库中导入了几个核心组件。<BrowserRouter>: 你需要用它把整个应用或者需要路由功能的部分包裹起来。它会开启React Router的“魔法”，让你的应用能够响应URL的变化。<Link>: 这是React Router提供的、用来替代<a>标签的组件。to="/": 指定了点击后要跳转到的URL路径。- 优点： 点击
<Link>组件不会引起页面刷新，它只会在内部更新UI和URL，提供了流畅的SPA体验。请始终使用<Link>进行应用内的页面跳转。
<Routes>: 这是一个容器，所有具体的路由规则<Route>都必须放在它里面。<Route>: 这是定义单条路由规则的组件。path="/": 定义了URL路径。/通常代表网站的根路径，也就是首页。element={<HomePage />}: 指定了当URL匹配path时，需要渲染的组件。
完整的流程是：
- 用户点击
<Link to="/about">。 - React Router拦截了这个点击，阻止了页面刷新。
- 它将浏览器的URL更新为
/about。 <Routes>组件检测到URL变化，开始匹配它的子<Route>。- 它发现
<Route path="/about" ... />这条规则匹配成功。 - 于是，它将
element属性中指定的<AboutPage />组件渲染到页面上。
第四步：测试效果
保存文件，回到浏览器。
- 你会看到页面上出现了“首页”和“关于我们”两个链接。
- 点击“关于我们”，注意观察：整个页面没有刷新，但下面的内容变成了“关于我们”页面的内容，并且浏览器地址栏的URL也变成了
http://localhost:5173/about。 - 再点击“首页”，内容又瞬间切换回了首页。
你已经成功地为你的应用添加了路由功能！
一个额外的知识点：404 页面
如果用户访问了一个我们没有定义的路径，比如/contact，会发生什么？默认会显示一个空白页面。我们可以配置一个“404未找到”页面来提升用户体验。
创建一个
NotFoundPage.jsx组件。在
<Routes>中添加一条特殊的<Route>规则：// ... 在 App.jsx 的 <Routes> 内部 ... <Routes> <Route path="/" element={<HomePage />} /> <Route path="/about" element={<AboutPage />} /> {/* "path='*'" 会匹配所有未被上面规则匹配到的路径 */} <Route path="*" element={<NotFoundPage />} /> </Routes>
《React入门教程》系列最终总结
恭喜你坚持到了最后！历经十篇文章，我们从一个空白的文件夹开始，一步一个脚印，系统地走完了React入门的完整路径。
让我们自豪地回顾一下我们解锁的技能清单：
- 项目创建： 使用 Vite 快速搭建现代化React项目。
- 核心数据： 掌握了 State 和 useState，让组件拥有自己的“记忆”。
- 组件通信： 学会了用 Props 实现父子组件间的数据传递。
- 用户交互： 掌握了 onClick 等事件处理，让应用能响应用户操作。
- 动态UI I： 学会了用
.map()渲染动态列表。 - 动态UI II： 学会了用条件渲染来控制UI的显示逻辑。
- 表单处理： 掌握了受控组件这一处理输入的标准模式。
- 连接外部： 学会了用 useEffect 在组件加载后请求API数据。
- 美化界面： 掌握了 CSS Modules 等主流的组件样式方案。
- 构建完整应用： 学会了用 React Router 实现页面导航。
你现在所掌握的，已经不仅仅是零散的知识点，而是一套完整的、足以用来构建真实小型应用的工作流和思想。你已经为自己打下了无比坚实的基础。
接下来呢？
React的世界依然广阔。以此为基石，你可以继续探索：
- 更高级的Hooks，如
useContext,useReducer,useRef。 - 更强大的状态管理库，如 Redux Toolkit 或 Zustand。
- React的生态框架，如 Next.js (用于服务端渲染和静态站点生成)。
- 组件库，如 Ant Design, Material-UI。
技术的旅程永无止境，但最重要的，是你已经勇敢地迈出了第一步，并坚持走完了这段最关键的入门之路。
祝贺你，你已经是一名合格的React开发者了！祝你在未来的编程之路上，创造出更多精彩的应用！