React Router 路由模式详解：HashRouter vs BrowserRouter

作者：北辰alk 原创

前言

在现代前端单页面应用（SPA）开发中，路由管理是至关重要的一环。React Router 作为 React 生态中最流行的路由库，提供了多种路由模式来满足不同场景的需求。本文将深入探讨 React Router 支持的两种主要路由模式：HashRouter 和 BrowserRouter，详细分析它们的实现原理、优缺点以及适用场景。

一、React Router 简介

React Router 是一个基于 React 的声明式路由库，它通过管理 URL 与组件之间的映射关系，实现了单页面应用的多视图切换功能。目前 React Router 的最新版本是 v6，提供了更加简洁和强大的 API。

安装 React Router

npm install react-router-dom

二、路由模式概述

React Router 主要支持两种路由模式：

1. HashRouter：使用 URL 的 hash 部分（#）进行路由
2. BrowserRouter：使用 HTML5 History API 进行路由

下面我们将分别深入探讨这两种模式的实现原理。

三、HashRouter 详解

3.1 基本概念

HashRouter 利用 URL 中的 hash 片段（#）来实现路由功能。当 hash 发生变化时，浏览器不会向服务器发送请求，但会触发 hashchange 事件，从而实现前端路由的切换。

3.2 实现原理

3.2.1 核心机制

HashRouter 的核心依赖于 window.location.hash 属性和 hashchange 事件：

// 设置 hash
window.location.hash = '/home';// 监听 hash 变化
window.addEventListener('hashchange', () => {const currentHash = window.location.hash.slice(1); // 去掉 # 号console.log('当前路由:', currentHash);
});

3.2.2 HashRouter 内部实现

让我们通过一个简化的 HashRouter 实现来理解其工作原理：

import React, { useState, useEffect, useLayoutEffect } from 'react';
import { createContext, useContext } from 'react';// 创建路由上下文
const RouterContext = createContext();// 简化的 HashRouter 实现
export function HashRouter({ children }) {const [location, setLocation] = useState({pathname: window.location.hash.slice(1) || '/',search: '',hash: ''});useEffect(() => {// 处理初始路由if (!window.location.hash) {window.location.hash = '/';}// 监听 hashchange 事件const handleHashChange = () => {const hash = window.location.hash.slice(1);setLocation(prev => ({...prev,pathname: hash.split('?')[0] || '/'}));};window.addEventListener('hashchange', handleHashChange);return () => {window.removeEventListener('hashchange', handleHashChange);};}, []);// 导航函数const navigate = (to) => {window.location.hash = to;};const contextValue = {location,navigate};return (<RouterContext.Provider value={contextValue}>{children}</RouterContext.Provider>);
}// 使用路由的 Hook
export function useHashRouter() {const context = useContext(RouterContext);if (!context) {throw new Error('useHashRouter must be used within a HashRouter');}return context;
}

3.2.3 使用示例

import React from 'react';
import { HashRouter, useHashRouter } from './HashRouter';function App() {return (<HashRouter><div className="app"><Navigation /><MainContent /></div></HashRouter>);
}function Navigation() {const { navigate } = useHashRouter();return (<nav><button onClick={() => navigate('/')}>首页</button><button onClick={() => navigate('/about')}>关于</button><button onClick={() => navigate('/contact')}>联系我们</button></nav>);
}function MainContent() {const { location } = useHashRouter();switch (location.pathname) {case '/':return <Home />;case '/about':return <About />;case '/contact':return <Contact />;default:return <NotFound />;}
}function Home() { return <h1>首页</h1>; }
function About() { return <h1>关于我们</h1>; }
function Contact() { return <h1>联系我们</h1>; }
function NotFound() { return <h1>页面未找到</h1>; }export default App;

3.3 HashRouter 工作流程图

3.4 优缺点分析

优点：

• 兼容性好：支持所有浏览器，包括老旧版本
• 部署简单：不需要服务器配置，适合静态文件托管
• 无刷新跳转：hash 变化不会导致页面刷新

缺点：

• URL 不美观：带有 # 符号，不符合传统 URL 习惯
• SEO 不友好：搜索引擎对 hash 片段的内容权重较低
• 功能限制：无法使用锚点功能（因为 # 被路由占用）

四、BrowserRouter 详解

4.1 基本概念

BrowserRouter 使用 HTML5 History API（pushState、replaceState、popstate）来实现路由功能，提供的是真正的 URL 路径，没有 # 符号。

4.2 实现原理

4.2.1 History API 核心方法

BrowserRouter 依赖于以下 History API 方法：

// 添加历史记录并改变当前 URL
history.pushState(state, title, url);// 替换当前历史记录
history.replaceState(state, title, url);// 监听前进后退
window.addEventListener('popstate', (event) => {console.log('位置变化:', window.location.pathname);
});

4.2.2 BrowserRouter 内部实现

以下是 BrowserRouter 的简化实现：

import React, { useState, useEffect, useCallback } from 'react';
import { createContext, useContext } from 'react';const RouterContext = createContext();// 创建历史记录管理对象
function createBrowserHistory() {const listeners = [];const notify = () => {listeners.forEach(listener => listener({pathname: window.location.pathname,search: window.location.search,hash: window.location.hash}));};// 监听 popstate 事件（浏览器前进后退）window.addEventListener('popstate', notify);return {listen(listener) {listeners.push(listener);return () => {const index = listeners.indexOf(listener);if (index > -1) {listeners.splice(index, 1);}};},push(path) {window.history.pushState({}, '', path);notify();},replace(path) {window.history.replaceState({}, '', path);notify();},get location() {return {pathname: window.location.pathname,search: window.location.search,hash: window.location.hash};}};
}export function BrowserRouter({ children }) {const [history] = useState(() => createBrowserHistory());const [location, setLocation] = useState(history.location);useEffect(() => {// 监听历史记录变化const unlisten = history.listen(newLocation => {setLocation(newLocation);});return unlisten;}, [history]);const navigate = useCallback((to, { replace = false } = {}) => {if (replace) {history.replace(to);} else {history.push(to);}}, [history]);const contextValue = {location,navigate,history};return (<RouterContext.Provider value={contextValue}>{children}</RouterContext.Provider>);
}export function useBrowserRouter() {const context = useContext(RouterContext);if (!context) {throw new Error('useBrowserRouter must be used within a BrowserRouter');}return context;
}

4.2.3 使用示例

import React from 'react';
import { BrowserRouter, useBrowserRouter } from './BrowserRouter';function App() {return (<BrowserRouter><div className="app"><Navigation /><MainContent /></div></BrowserRouter>);
}function Navigation() {const { navigate } = useBrowserRouter();return (<nav><button onClick={() => navigate('/')}>首页</button><button onClick={() => navigate('/about')}>关于</button><button onClick={() => navigate('/contact')}>联系我们</button></nav>);
}function MainContent() {const { location } = useBrowserRouter();switch (location.pathname) {case '/':return <Home />;case '/about':return <About />;case '/contact':return <Contact />;default:return <NotFound />;}
}function Home() { return <h1>首页</h1>; }
function About() { return <h1>关于我们</h1>; }
function Contact() { return <h1>联系我们</h1>; }
function NotFound() { return <h1>页面未找到</h1>; }export default App;

4.3 BrowserRouter 工作流程图

4.4 服务器配置

使用 BrowserRouter 时，需要服务器配置支持。以下是一些常见服务器的配置示例：

Nginx 配置

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

Apache 配置

<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]
</IfModule>

Express 配置

const express = require('express');
const path = require('path');
const app = express();app.use(express.static(path.join(__dirname, 'build')));app.get('*', function(req, res) {res.sendFile(path.join(__dirname, 'build', 'index.html'));
});app.listen(9000);

4.5 优缺点分析

优点：

• URL 美观：没有 # 符号，符合传统 URL 习惯
• SEO 友好：搜索引擎可以正常抓取路由内容
• 功能完整：可以使用完整的 URL 功能，包括锚点

缺点：

• 兼容性要求：需要浏览器支持 HTML5 History API
• 服务器配置：需要服务器端配置支持，否则刷新会出现 404
• 部署复杂：相比 HashRouter 部署更复杂

五、两种模式对比

5.1 功能对比表

特性	HashRouter	BrowserRouter
URL 美观度	差（有 #）	好（无 #）
浏览器兼容性	所有浏览器	IE10+
服务器配置	不需要	需要
SEO 支持	差	好
实现原理	hashchange 事件	History API
部署难度	简单	复杂
锚点功能	不可用	可用

5.2 选择建议

使用 HashRouter 的场景：

• 不支持 History API 的老旧浏览器
• 静态网站托管（如 GitHub Pages）
• 快速原型开发，不想配置服务器
• 公司内网应用，SEO 不重要

使用 BrowserRouter 的场景：

• 现代浏览器环境
• 需要 SEO 优化的公开网站
• 有服务器配置权限
• 需要美观的 URL

六、React Router v6 实际使用示例

6.1 使用 HashRouter

import React from 'react';
import { HashRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import User from './components/User';function App() {return (<HashRouter><div className="app"><nav><ul><li><Link to="/">首页</Link></li><li><Link to="/about">关于</Link></li><li><Link to="/contact">联系我们</Link></li><li><Link to="/user/123">用户页面</Link></li></ul></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/contact" element={<Contact />} /><Route path="/user/:id" element={<User />} /></Routes></div></HashRouter>);
}export default App;

6.2 使用 BrowserRouter

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import User from './components/User';function App() {return (<BrowserRouter><div className="app"><nav><ul><li><Link to="/">首页</Link></li><li><Link to="/about">关于</Link></li><li><Link to="/contact">联系我们</Link></li><li><Link to="/user/123">用户页面</Link></li></ul></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/contact" element={<Contact />} /><Route path="/user/:id" element={<User />} /></Routes></div></BrowserRouter>);
}export default App;

6.3 编程式导航示例

import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';function User() {const { id } = useParams();const navigate = useNavigate();const handleGoBack = () => {navigate(-1); // 返回上一页};const handleGoHome = () => {navigate('/'); // 跳转到首页};const handleReplace = () => {navigate('/about', { replace: true }); // 替换当前历史记录};return (<div><h1>用户页面 - ID: {id}</h1><button onClick={handleGoBack}>返回</button><button onClick={handleGoHome}>回首页</button><button onClick={handleReplace}>替换关于页面</button></div>);
}export default User;

七、高级特性与最佳实践

7.1 路由懒加载

使用 React.lazy 和 Suspense 实现路由懒加载：

import React, { Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));
const Contact = React.lazy(() => import('./components/Contact'));function App() {return (<BrowserRouter><Suspense fallback={<div>加载中...</div>}><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/contact" element={<Contact />} /></Routes></Suspense></BrowserRouter>);
}export default App;

7.2 路由守卫

实现简单的路由守卫：

import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';// 模拟认证状态
const useAuth = () => {return { isAuthenticated: true }; // 改为 false 测试未认证情况
};function ProtectedRoute({ children }) {const auth = useAuth();const location = useLocation();if (!auth.isAuthenticated) {// 重定向到登录页，并保存当前位置return <Navigate to="/login" state={{ from: location }} replace />;}return children;
}// 使用示例
function App() {return (<BrowserRouter><Routes><Route path="/login" element={<Login />} /><Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} /></Routes></BrowserRouter>);
}

八、总结

React Router 提供了 HashRouter 和 BrowserRouter 两种路由模式，每种模式都有其适用的场景和优缺点。选择哪种模式取决于项目的具体需求：

• HashRouter 简单易用，兼容性好，适合快速开发和静态部署
• BrowserRouter 提供更美观的 URL 和更好的 SEO 支持，适合生产环境

在实际开发中，建议根据目标用户群体、部署环境和项目需求来选择合适的路由模式。对于现代 Web 应用，BrowserRouter 通常是更好的选择，因为它提供了更好的用户体验和 SEO 支持。

希望本文能够帮助你深入理解 React Router 的路由模式，并在实际项目中做出合适的技术选型。

---

作者：北辰alk 原创
版权声明：转载请注明出处