React之旅-03路由

做为前端开发框架，React 的组件化设计思想，使前端开发变得更加灵活高效。对于大型复杂的项目来说，页面之间的导航变得尤为重要。因此如何管理路由，是所有开发者必须考虑的问题。

React 官方推荐的路由库-React Router，它是React应用程序中路由的标准库，支持视图/组件之间的导航，同时保持UI与URL同步。它广泛用于构建具有动态路由的单页应用程序（SPA）。

React Router官网：React Router Official Documentation

安装，打开之前创建的项目，在终端中输入命令：

npm install react-router-dom

如下图所示：

编辑App.tsx文件，代码如下：

import "./App.css"; import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; function Home() { return <h2>Home Page</h2>; } function About() { return <h2>About Page</h2>; } function App() { return ( <BrowserRouter> <nav> <Link to="/">Home</Link> | <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </BrowserRouter> ); } export default App;

在终端中运行：npm run dev ，界面如下图：

在浏览器地址栏中输入：http://localhost:5174/，如下图：

点击 Home 和 About 链接，可切换界面，到目前为止，基于React Router的简单路由已经实现。

补充，不同组件的区别，来源于DeepSeek的解释：

组件角色关键特性BrowserRouter路由容器，管理History API包裹整个应用，提供路由上下文环境Routes路由匹配容器，包裹多个Route在v6中替代Switch，自动选择最优匹配Route定义路径与组件的映射关系通过path和element配置渲染逻辑Link实现无刷新导航的链接类似<a>标签，但通过to属性控制SPA内跳转