网站开发技术分享ppt沂源网站开发

---

前言

React 社区主流使用的是 React Router，它和 Vue Router 是功能上非常类似的客户端路由库，但底层实现原理与 Vue Router 在设计理念上有显著差异。

---

✅ React Router vs Vue Router 对比一览

特性 / 对比项	Vue Router	React Router
配置方式	配置式：通过 routes 数组注册	声明式：通过 JSX 结构描述嵌套关系
路由定义	createRouter({ routes })	<Route path="/" element={<Home />}>
路由嵌套	嵌套路由由 children 配置	JSX 中嵌套 <Route> 实现嵌套路由
响应式机制依赖	Vue 响应式系统	React 状态系统（useState, useEffect）
导航守卫	beforeEach, beforeRouteEnter	没有内建守卫，需自定义封装逻辑组件
底层历史机制	自己封装了一套 History 模块	直接使用 history 或 react-router-dom 的 history 包
路由渲染组件	<router-view>	<Outlet>

---

🧩 React Router 的底层原理简述

React Router 的核心机制分为：

① 路由声明与匹配（基于 JSX）

• React Router 利用 JSX 定义 Route 树，使用的是声明式 API：

<Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} />
</Routes>

• Routes 组件内部会解析子 Route 节点，构建匹配树并与 window.location.pathname 匹配。

---

② 历史模式管理

• 由 react-router-dom 提供的 BrowserRouter / HashRouter：

<BrowserRouter>  // HTML5 History API
<HashRouter>     // Hash 模式

• 内部使用了 history 包（https://github.com/remix-run/history）来封装 URL 操作。

---

③ 响应式状态处理

React Router 使用自己的 useLocation()、useNavigate()、useParams() 来读取当前状态或跳转。

内部用 React Context + useReducer 实现状态追踪和通知刷新。

---

④ 路由渲染机制（Outlet）

React Router 使用 <Outlet /> 实现嵌套路由组件插槽渲染，类似 Vue 的 <router-view>。

<Route path="settings" element={<SettingsLayout />}><Route path="profile" element={<Profile />} />
</Route>

在 SettingsLayout 组件中使用 <Outlet /> 来渲染 Profile。

---

✅ 总结：原理是否一样？

相同点	不同点
都使用 history API 或 hash 进行地址管理	Vue 用配置式路由表；React 用 JSX 声明式结构
都支持嵌套路由、动态参数、懒加载、路由组件渲染等	Vue 内建导航守卫；React 需自行通过组件逻辑封装
都有 <router-view> / <Outlet> 类似插槽来决定显示哪个组件	React 更强调函数式组件和 hooks，Vue 更强调响应式系统和生命周期钩子

---

完整示例

下面给出一个 React Router v6+ 实现导航守卫和嵌套路由的完整示例，可以类比 Vue Router 的 beforeEach 或 meta.requiresAuth 功能。

---

✅ 示例目标：

• 实现一个登录保护机制：/dashboard 只能登录后访问。
• 使用嵌套路由：/dashboard/profile、/dashboard/settings。
• 使用 <Outlet /> 类似 Vue 的 <router-view>。

---

📦 1. 安装依赖

npm install react-router-dom

---

🧩 2. 目录结构

src/
├─ App.tsx
├─ routes/
│  ├─ ProtectedRoute.tsx
│  ├─ DashboardLayout.tsx
│  ├─ Profile.tsx
│  ├─ Settings.tsx
├─ pages/
│  ├─ Login.tsx
│  ├─ Home.tsx

---

🧱 3. 实现组件

App.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import DashboardLayout from './routes/DashboardLayout'
import ProtectedRoute from './routes/ProtectedRoute'
import Profile from './routes/Profile'
import Settings from './routes/Settings'export default function App() {return (<BrowserRouter><Routes><Route path="/" element={<Home />} /><Route path="/login" element={<Login />} />{/* 嵌套路由 + 路由守卫 */}<Route element={<ProtectedRoute />}><Route path="/dashboard" element={<DashboardLayout />}><Route path="profile" element={<Profile />} /><Route path="settings" element={<Settings />} /></Route></Route></Routes></BrowserRouter>)
}

---

ProtectedRoute.tsx

import { Navigate, Outlet } from 'react-router-dom'// 假设是全局变量 / 状态管理
const isAuthenticated = () => !!localStorage.getItem('token')export default function ProtectedRoute() {return isAuthenticated() ? <Outlet /> : <Navigate to="/login" />
}

📌 类似于 Vue 的导航守卫 beforeEnter。

---

DashboardLayout.tsx

import { Outlet, Link } from 'react-router-dom'export default function DashboardLayout() {return (<div><h2>Dashboard</h2><nav><Link to="profile">Profile</Link> | <Link to="settings">Settings</Link></nav><hr /><Outlet /> {/* 嵌套路由入口 */}</div>)
}

---

Profile.tsx / Settings.tsx

export default function Profile() {return <div>👤 This is your profile.</div>
}export default function Settings() {return <div>⚙️ Here are your settings.</div>
}

---

Login.tsx

import { useNavigate } from 'react-router-dom'export default function Login() {const navigate = useNavigate()const login = () => {localStorage.setItem('token', 'dummy')navigate('/dashboard')}return <button onClick={login}>Login</button>
}

---

Home.tsx

import { Link } from 'react-router-dom'export default function Home() {return (<div><h1>🏠 Home Page</h1><Link to="/dashboard">Go to Dashboard</Link></div>)
}

---

✅ 效果总结

• 未登录访问 /dashboard/profile 会跳转 /login。
• 登录后会自动导航回 dashboard。
• 嵌套路由使用 <Outlet /> 插槽进行渲染，结构清晰。

---

后续：

1. React Router + Zustand 权限管理系统（支持登录、角色验证、自动跳转）
2. token 校验 + 自动续签 + 刷新记住身份 的版本