React：React Router中，HashRouter和BrowserRouter的区别和原理？

基本概念

在 React Router 中，HashRouter 和 BrowserRouter 是两种常用的路由组件，它们的主要区别在于 URL 的表现形式和工作原理。以下是它们的详细对比：

1. URL 表现形式

(1) HashRouter

• URL 格式 ：http://example.com/#/about

• 特点 ：URL 中包含一个 # 符号，# 后面的部分称为 hash，不会发送到服务器。

• 示例 ：

  http://example.com/#/home
  http://example.com/#/about

(2) BrowserRouter

• URL 格式 ：http://example.com/about

• 特点 ：URL 是干净的，没有 # 符号，看起来像传统的 URL。

• 示例 ：

  http://example.com/home
  http://example.com/about

---

2. 工作原理

(1) HashRouter

• 原理 ：HashRouter 利用 URL 中的 hash 部分 （即 # 后面的内容）来实现路由。
  • 当 URL 的 hash 部分发生变化时，浏览器不会向服务器发送请求。
  • React Router 监听 hashchange 事件，根据 hash 的变化渲染对应的组件。
• 优点 ：
  • 兼容性更好，适用于不支持 HTML5 History API 的旧浏览器。
  • 不需要服务器配置，适合静态站点或单页应用（SPA）。
• 缺点 ：
  • URL 中包含 #，不够美观。
  • 不支持服务端渲染（SSR）。

(2) BrowserRouter

• 原理 ：BrowserRouter 使用 HTML5 的 History API （pushState、replaceState 和 popstate 事件）来实现路由。
  • 当 URL 发生变化时，浏览器不会向服务器发送请求。
  • React Router 监听 popstate 事件，根据 URL 的变化渲染对应的组件。
• 优点 ：
  • URL 干净美观，符合传统 URL 格式。
  • 支持服务端渲染（SSR）。
• 缺点 ：
  • 需要服务器配置，确保所有路由都返回 index.html，否则刷新页面时会返回 404 错误。
  • 兼容性较差，不支持旧浏览器（如 IE9 及以下）。

---

3. 服务器配置

(1) HashRouter

• 不需要特殊配置 ：因为 # 后面的部分不会发送到服务器，服务器只需要返回 index.html 即可。

(2) BrowserRouter

• 需要服务器配置 ：服务器需要配置为所有路由都返回 index.html，否则刷新页面时会返回 404 错误。

  • Nginx 配置示例 ：

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

  • Express 配置示例 ：

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

---

4. 使用场景

(1) HashRouter

• 适合场景 ：

  • 静态站点或单页应用（SPA）。
  • 不支持 HTML5 History API 的旧浏览器。
  • 不需要服务端渲染（SSR）。

• 示例 ：

  import { HashRouter as Router, Route, Switch } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <Switch>
          <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Router>
    );
  }

(2) BrowserRouter

• 适合场景 ：

  • 现代浏览器环境。
  • 需要干净的 URL。
  • 需要服务端渲染（SSR）。

• 示例 ：

  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <Switch>
          <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Router>
    );
  }

---

5. 总结对比

特性	HashRouter	BrowserRouter
URL 格式	http://example.com/#/about	http://example.com/about
原理	基于 URL 的 hash 部分	基于 HTML5 History API
兼容性	兼容所有浏览器	不兼容旧浏览器（如 IE9 及以下）
服务器配置	不需要特殊配置	需要配置所有路由返回 index.html
服务端渲染	不支持	支持
URL 美观性	包含 #，不够美观	干净美观
适用场景	静态站点、旧浏览器、简单 SPA	现代浏览器、需要 SSR、干净的 URL

---

选择建议

• 如果你的应用需要支持旧浏览器，或者是一个简单的静态站点，可以选择 HashRouter。
• 如果你的应用面向现代浏览器，并且需要干净的 URL 或服务端渲染，建议使用 BrowserRouter。