在使用 React Router 构建 Web 应用时，我们经常会面临一个选择：使用 HashRouter 还是 BrowserRouter？ 这两种路由模式在机制、URL 表现和部署要求上有所不同，本文将深入对比讲解它们的工作原理、优劣势和应用场景，帮助你做出正确选择。

🧭 1. 路由机制概述

React Router 提供了不同的 Router 组件来支持不同的路由管理策略，最常见的两个是：

Router 类型URL 示例实现方式
BrowserRouterhttps://example.com/about使用 HTML5 History API
HashRouterhttps://example.com/#/about使用 URL hash (#)

🔍 2. HashRouter 与 BrowserRouter 对比详解

特性HashRouterBrowserRouter
URL 形式带 #，如：/#/about标准 URL，形如 /about
原理利用 window.location.hash利用 HTML5 History API：pushState / popState
浏览器支持几乎所有浏览器仅支持 HTML5 History 的现代浏览器
服务端支持要求无需服务端配置，适合静态托管需要服务端配置支持 URL 重写到 index.html
刷新页面行为不会请求服务器，跳转仍由前端控制页面刷新会发起 HTTP 请求，若服务器无配置会返回 404
SEO 支持差（hash 后的内容不会被搜索引擎抓取）好，真实路径结构，利于搜索引擎索引
推荐使用场景本地开发、无后端支持的静态页面SEO 优先、生产环境、有服务端支持的正式项目

🧪 3. 使用方式对比（代码示例）

✅ HashRouter 示例

import { HashRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </HashRouter>
  );
}

访问路径为：http://localhost:3000/#/about

✅ BrowserRouter 示例

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

访问路径为：http://localhost:3000/about

🧩 若刷新 /about 页面，需配置服务端 重定向所有请求至 index.html。

🌐 4. 服务端配置示例（BrowserRouter）

如果你使用 BrowserRouter，服务器必须支持“前端路由路径回退到 index.html”，以下是常见服务端的配置方式：

Apache（.htaccess）

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx

location / {
  try_files $uri /index.html;
}

Vite 本地开发（vite.config.ts）

export default defineConfig({
  server: {
    historyApiFallback: true
  }
});

✅ 5. 何时选择哪一个？

场景推荐 Router理由
静态部署（如 GitHub Pages、OSS）✅ HashRouter无服务端重写能力，避免刷新 404
动态部署 + 有服务器配置权限✅ BrowserRouter更优雅 URL、更好 SEO、更接近真实后端路由
本地测试 / Demo✅ HashRouter简单方便，无配置即可使用
需要 SEO（如博客、商城）✅ BrowserRouter搜索引擎能识别页面 URL
Electron、Hybrid App 等嵌入式项目✅ HashRouter通常不使用真实服务器路由，使用 hash 更稳妥

🧾 总结一句话

HashRouter 是“安全牌”，适合“静态部署无后端”；BrowserRouter 更现代、更优雅，但你需要配置服务器支持。

🧩 Bonus：MemoryRouter 是什么？

除了以上两种，还有一个特殊的：

Router 类型用途说明
MemoryRouter用于测试环境（Jest）或 React Native 等非浏览器环境

如果你正在搭建项目而不确定该选哪一个，可以告诉我你的部署方式或平台，我可以直接推荐最佳方案并给出对应配置。需要我帮你配置一下吗？