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

文章目录

• • 前言
  • 一、React Router 简介
  • 二、React Router 的路由模式
  • • 1. HashRouter 模式
    • • 1.1 基本概念
      • 1.2 实现原理
      • 1.3 核心代码实现
      • 1.4 工作流程图
      • 1.5 优缺点分析
      • 1.6 适用场景
    • 2. BrowserRouter 模式
    • • 2.1 基本概念
      • 2.2 实现原理
      • 2.3 核心代码实现
      • 2.4 工作流程图
      • 2.5 服务器端配置
      • 2.6 优缺点分析
      • 2.7 适用场景
  • 三、两种模式的对比
  • 四、React Router v6 中的使用
  • 五、内存路由(MemoryRouter)
  • 六、最佳实践与常见问题
  • • 1. 如何选择路由模式？
    • 2. 常见问题解决
  • 七、高级主题：自定义路由模式
  • 八、总结

前言

在现代前端开发中，单页应用(SPA)已经成为主流，而路由管理是SPA的核心功能之一。React Router作为React生态中最流行的路由库，提供了多种路由模式以适应不同的应用场景。本文将深入探讨React Router支持的两种主要路由模式：HashRouter和BrowserRouter，分析它们的实现原理、适用场景以及内部工作机制，并通过丰富的代码示例和流程图帮助读者全面理解。

一、React Router 简介

React Router是一个基于React的强大路由库，它能够保持UI与URL同步，提供了一种直观的方式来定义应用程序的导航结构。React Router经历了多个版本的迭代，目前最新的v6版本带来了更简洁的API和更强大的功能。

React Router主要包含以下核心组件：

• <Router>: 路由容器组件
• <Routes> 和 <Route>: 路由匹配组件
• <Link> 和 <NavLink>: 导航组件
• 各种路由钩子函数

二、React Router 的路由模式

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

1. HashRouter 模式

1.1 基本概念

HashRouter利用URL中的hash(#)部分来实现客户端路由。当hash改变时，浏览器不会向服务器发送请求，而是会触发hashchange事件，React Router监听这个事件并根据当前的hash值渲染对应的组件。

示例URL: http://example.com/#/about

1.2 实现原理

HashRouter的核心实现依赖于以下几个关键点：

1.3 核心代码实现

让我们来看一个简化版的HashRouter实现：

import React, { useState, useEffect } from 'react';
import { createContext, useContext } from 'react';

const RouterContext = createContext();

function HashRouter({ children }) {
const [path, setPath] = useState(() => {
// 初始化时获取当前hash
return window.location.hash.slice(1) || '/';
});

useEffect(() => {
const handleHashChange = () => {
setPath(window.location.hash.slice(1) || '/');
};

// 监听hash变化
window.addEventListener('hashchange', handleHashChange);

return () => {
window.removeEventListener('hashchange', handleHashChange);
};
}, []);

const navigate = (to) => {
window.location.hash = to;
};

return (
<RouterContext.Provider value={{ path, navigate }}>
{children}
</RouterContext.Provider>
);
}

function Route({ path: routePath, component: Component }) {
const { path } = useContext(RouterContext);
return path === routePath ? <Component /> : null;
}

function Link({ to, children }) {
const { navigate } = useContext(RouterContext);
return (
<a href={`#${to}`} onClick={(e) => {
e.preventDefault();
navigate(to);
}}>
{children}
</a>
);
}

// 使用示例
function App() {
return (
<HashRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</HashRouter>
);
}

function Home() { return <h1>Home</h1>; }
function About() { return <h1>About</h1>; }

1.4 工作流程图

#mermaid-svg-u05EVgF7Ss0e8564 {font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-u05EVgF7Ss0e8564 .error-icon{fill:#552222;}#mermaid-svg-u05EVgF7Ss0e8564 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-u05EVgF7Ss0e8564 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-u05EVgF7Ss0e8564 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-u05EVgF7Ss0e8564 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-u05EVgF7Ss0e8564 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-u05EVgF7Ss0e8564 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-u05EVgF7Ss0e8564 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-u05EVgF7Ss0e8564 .marker.cross{stroke:#333333;}#mermaid-svg-u05EVgF7Ss0e8564 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-u05EVgF7Ss0e8564 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-u05EVgF7Ss0e8564 text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-u05EVgF7Ss0e8564 .actor-line{stroke:grey;}#mermaid-svg-u05EVgF7Ss0e8564 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-u05EVgF7Ss0e8564 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-u05EVgF7Ss0e8564 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-u05EVgF7Ss0e8564 .sequenceNumber{fill:white;}#mermaid-svg-u05EVgF7Ss0e8564 #sequencenumber{fill:#333;}#mermaid-svg-u05EVgF7Ss0e8564 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-u05EVgF7Ss0e8564 .messageText{fill:#333;stroke:#333;}#mermaid-svg-u05EVgF7Ss0e8564 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-u05EVgF7Ss0e8564 .labelText,#mermaid-svg-u05EVgF7Ss0e8564 .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-u05EVgF7Ss0e8564 .loopText,#mermaid-svg-u05EVgF7Ss0e8564 .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-u05EVgF7Ss0e8564 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-u05EVgF7Ss0e8564 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-u05EVgF7Ss0e8564 .noteText,#mermaid-svg-u05EVgF7Ss0e8564 .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-u05EVgF7Ss0e8564 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-u05EVgF7Ss0e8564 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-u05EVgF7Ss0e8564 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-u05EVgF7Ss0e8564 .actorPopupMenu{position:absolute;}#mermaid-svg-u05EVgF7Ss0e8564 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-u05EVgF7Ss0e8564 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-u05EVgF7Ss0e8564 .actor-man circle,#mermaid-svg-u05EVgF7Ss0e8564 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-u05EVgF7Ss0e8564 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

User

Browser

HashRouter

ReactComponent

点击带有

触发hashchange事件

解析新的hash路径

根据路径渲染对应组件

更新DOM显示新组件

User

Browser

HashRouter

ReactComponent

1.5 优缺点分析

优点：

缺点：

1.6 适用场景

2. BrowserRouter 模式

2.1 基本概念

BrowserRouter使用HTML5 History API（pushState, replaceState, popState）来实现客户端路由。它提供了更清洁的URL（没有#），看起来更像传统的URL路径。

示例URL: http://example.com/about

2.2 实现原理

BrowserRouter的核心实现依赖于以下几个关键点：

2.3 核心代码实现

下面是一个简化版的BrowserRouter实现：

import React, { useState, useEffect } from 'react';
import { createContext, useContext } from 'react';

const RouterContext = createContext();

function BrowserRouter({ children }) {
const [path, setPath] = useState(() => {
return window.location.pathname;
});

useEffect(() => {
const handlePopState = () => {
setPath(window.location.pathname);
};

window.addEventListener('popstate', handlePopState);

return () => {
window.removeEventListener('popstate', handlePopState);
};
}, []);

const navigate = (to) => {
window.history.pushState({}, '', to);
setPath(to);
};

return (
<RouterContext.Provider value={{ path, navigate }}>
{children}
</RouterContext.Provider>
);
}

function Route({ path: routePath, component: Component }) {
const { path } = useContext(RouterContext);
return path === routePath ? <Component /> : null;
}

function Link({ to, children }) {
const { navigate } = useContext(RouterContext);
return (
<a href={to} onClick={(e) => {
e.preventDefault();
navigate(to);
}}>
{children}
</a>
);
}

// 使用示例
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</BrowserRouter>
);
}

function Home() { return <h1>Home</h1>; }
function About() { return <h1>About</h1>; }

2.4 工作流程图

#mermaid-svg-hM9weKGQ6cvnUOoC {font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hM9weKGQ6cvnUOoC .error-icon{fill:#552222;}#mermaid-svg-hM9weKGQ6cvnUOoC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-hM9weKGQ6cvnUOoC .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-hM9weKGQ6cvnUOoC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-hM9weKGQ6cvnUOoC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-hM9weKGQ6cvnUOoC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-hM9weKGQ6cvnUOoC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-hM9weKGQ6cvnUOoC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-hM9weKGQ6cvnUOoC .marker.cross{stroke:#333333;}#mermaid-svg-hM9weKGQ6cvnUOoC svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-hM9weKGQ6cvnUOoC .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-hM9weKGQ6cvnUOoC text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-hM9weKGQ6cvnUOoC .actor-line{stroke:grey;}#mermaid-svg-hM9weKGQ6cvnUOoC .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-hM9weKGQ6cvnUOoC .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-hM9weKGQ6cvnUOoC #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-hM9weKGQ6cvnUOoC .sequenceNumber{fill:white;}#mermaid-svg-hM9weKGQ6cvnUOoC #sequencenumber{fill:#333;}#mermaid-svg-hM9weKGQ6cvnUOoC #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-hM9weKGQ6cvnUOoC .messageText{fill:#333;stroke:#333;}#mermaid-svg-hM9weKGQ6cvnUOoC .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-hM9weKGQ6cvnUOoC .labelText,#mermaid-svg-hM9weKGQ6cvnUOoC .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-hM9weKGQ6cvnUOoC .loopText,#mermaid-svg-hM9weKGQ6cvnUOoC .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-hM9weKGQ6cvnUOoC .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-hM9weKGQ6cvnUOoC .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-hM9weKGQ6cvnUOoC .noteText,#mermaid-svg-hM9weKGQ6cvnUOoC .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-hM9weKGQ6cvnUOoC .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-hM9weKGQ6cvnUOoC .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-hM9weKGQ6cvnUOoC .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-hM9weKGQ6cvnUOoC .actorPopupMenu{position:absolute;}#mermaid-svg-hM9weKGQ6cvnUOoC .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-hM9weKGQ6cvnUOoC .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-hM9weKGQ6cvnUOoC .actor-man circle,#mermaid-svg-hM9weKGQ6cvnUOoC line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-hM9weKGQ6cvnUOoC :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

User

Browser

BrowserRouter

ReactComponent

Server

点击链接

阻止默认行为

history.pushState()

根据路径渲染组件

更新DOM

刷新页面或直接访问URL

请求对应路径

返回index.html (需配置)

User

Browser

BrowserRouter

ReactComponent

Server

2.5 服务器端配置

使用BrowserRouter时，服务器需要配置对所有路径返回相同的HTML文件（通常是index.html），因为实际的路径解析是由前端路由处理的。以下是常见服务器的配置示例：

Nginx配置：

server {
listen 80;
server_name example.com;
root /path/to/app;
index index.html;

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

Express配置：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000);

2.6 优缺点分析

优点：

缺点：

2.7 适用场景

三、两种模式的对比

四、React Router v6 中的使用

React Router v6中两种路由模式的使用方式非常相似，主要区别在于根组件：

// HashRouter
import { HashRouter as Router } from 'react-router-dom';

function App() {
return (
<Router>
{/* 应用内容 */}
</Router>
);
}

// BrowserRouter
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
return (
<Router>
{/* 应用内容 */}
</Router>
);
}

v6版本还引入了新的API如<Routes>、useNavigate等，但路由模式的核心概念保持不变。

五、内存路由(MemoryRouter)

除了上述两种主要模式，React Router还提供了一种特殊的路由模式：MemoryRouter。它将路由信息保存在内存中，不改变实际URL，适用于测试或非浏览器环境（如React Native）。

import { MemoryRouter } from 'react-router-dom';

function TestApp() {
return (
<MemoryRouter initialEntries={['/']}>
{/* 测试组件 */}
</MemoryRouter>
);
}

六、最佳实践与常见问题

1. 如何选择路由模式？

• 如果需要支持老旧浏览器或无法配置服务器，选择HashRouter
• 如果面向现代浏览器且可以控制服务器配置，选择BrowserRouter
• 如果是测试或非浏览器环境，考虑MemoryRouter

2. 常见问题解决

问题1：使用BrowserRouter时刷新页面出现404

解决方案：配置服务器对所有路由返回index.html（见2.5节服务器配置）

问题2：如何实现平滑过渡

解决方案：使用React Router的<TransitionGroup>或第三方动画库如Framer Motion

import { motion } from 'framer-motion';
import { Routes, Route, useLocation } from 'react-router-dom';

function AnimatedRoutes() {
const location = useLocation();

return (
<motion.div
key={location.pathname}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
<Routes location={location}>
{/* 路由配置 */}
</Routes>
</motion.div>
);
}

问题3：如何实现滚动恢复

解决方案：使用React Router的<ScrollRestoration>或手动实现

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ScrollToTop() {
const { pathname } = useLocation();

useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);

return null;
}

七、高级主题：自定义路由模式

在某些特殊场景下，你可能需要实现自定义的路由模式。React Router的设计允许这种扩展：

import { createBrowserHistory, createHashHistory } from 'history';
import { Router } from 'react-router-dom';

// 自定义history对象
const customHistory = createBrowserHistory({
basename: '/app', // 基础路径
forceRefresh: false, // 是否强制刷新
});

function CustomRouter() {
return (
<Router history={customHistory}>
{/* 应用内容 */}
</Router>
);
}

八、总结

React Router提供了灵活的路由解决方案，适应不同的应用场景和技术约束。理解HashRouter和BrowserRouter的区别及实现原理，有助于开发者根据项目需求做出合理选择。随着前端技术的不断发展，BrowserRouter已成为现代Web应用的首选，但在特定场景下HashRouter仍然有其用武之地。

无论选择哪种路由模式，React Router都提供了强大的API来管理应用导航和状态，使开发者能够构建复杂而高效的单页应用程序。