React路由

### 三层标题：React 中实现路由的方式及相关库 在构建多页面 React 应用时，客户端路由是实现页面导航和状态管理的关键部分。React 本身并不提供内置的路由功能，但社区提供了多种成熟的解决方案来实现这一需求。其中最常用的是 `react-router`，它是一个专为 React 设计的路由库，支持多种路由模式，并具备良好的可扩展性与兼容性[^1]。 #### 路由模式 React Router 支持两种主要的 URL 模式：**哈希路由（HashRouter）** 和 **浏览器历史记录路由（BrowserRouter）**。 - **哈希路由** 使用 URL 中的 `#` 符号作为路径标识符。这种方式兼容性好，适用于不支持 HTML5 History API 的旧浏览器环境。例如： ```jsx import React from 'react'; import { HashRouter, Route, Link } from 'react-router-dom'; function App() { return ( <HashRouter> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> <hr /> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </div> </HashRouter> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function Contact() { return <h2>Contact</h2>; } export default App; ``` 该方式特别适合部署在静态服务器上且不需要后端配合的项目[^2]。 - **浏览器历史记录路由** 使用 HTML5 的 `history.pushState` API 来管理 URL，路径更美观且无需 `#`，但需要服务器配置以支持所有路径重定向到入口文件（如 `index.html`）。使用方式如下： ```jsx import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; function App() { return ( <Router> <div> <nav> <Link to="/">首页</Link> <Link to="/about">关于</Link> </nav> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </div> </Router> ); } ``` 此方式更适合现代 Web 应用场景，能够提供更自然的 URL 结构[^1]。 #### 其他相关库 除了官方推荐的 `react-router`，还有一些替代方案可以根据项目需求选择使用： - **Reach Router**：一个轻量级的 React 路由器，强调无障碍访问和类型安全，现已停止维护，其核心功能已被合并进 `react-router v6`。 - **Vite + React Router**：对于使用 Vite 构建工具的项目，可以结合 `react-router` 实现高效的开发体验。 - **UmiJS**：一个基于 React 的企业级前端框架，内置了路由系统，适用于大型应用开发。 - **Next.js**：虽然不是传统意义上的路由库，但它通过文件系统自动创建路由，非常适合服务端渲染（SSR）项目。 #### 核心特性 React Router 提供了许多高级功能，包括但不限于： - 嵌套路由（Nested Routes）：用于组织具有层级结构的页面。 - 动态路由匹配（Dynamic Route Matching）：允许定义参数化的路径，如 `/user/:id`。 - 导航控制（Programmatic Navigation）：通过 `useNavigate` 钩子或 `<Navigate>` 组件实现编程式跳转。 - 路由守卫（Route Guards）：通过高阶组件或自定义钩子实现权限控制逻辑。 这些功能使得 `react-router` 成为了构建复杂 React 单页应用（SPA）不可或缺的工具之一。 ---