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。
• 如果你的应用面向现代浏览器，并且需要干净的 URL 或服务端渲染，建议使用 BrowserRouter。