React Router Vs Vue Router-CSDN博客

本文链接：https://blog.csdn.net/Bruce__taotao/article/details/147775858

前言

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>
  )
}