React Router 中 BrowserRouter 和 HashRouter 的区别是什么？

推荐答案

在 React Router 中，BrowserRouter 和 HashRouter 是两种不同的路由组件，它们的主要区别在于 URL 的表现形式和处理方式。

• BrowserRouter：使用 HTML5 的 history API（pushState、replaceState 和 popstate 事件）来保持 UI 和 URL 的同步。URL 看起来更干净，例如 http://example.com/about。但它需要服务器配置支持，以确保在直接访问或刷新页面时，服务器能正确返回应用的主页面。

• HashRouter：使用 URL 的 hash 部分（即 # 后面的部分）来保持 UI 和 URL 的同步。URL 看起来像 http://example.com/#/about。它不需要服务器配置，因为 hash 部分不会被发送到服务器，因此适用于静态文件服务器或无法配置服务器的情况。

本题详细解读

BrowserRouter 的工作原理

BrowserRouter 依赖于 HTML5 的 history API，它允许你在不重新加载页面的情况下改变 URL。当你使用 BrowserRouter 时，URL 看起来像普通的路径，例如 http://example.com/about。这种 URL 结构更符合现代 Web 应用的标准，但需要服务器配置支持。

服务器配置要求

由于 BrowserRouter 使用的是真实的路径，当用户直接访问或刷新页面时，服务器需要配置为返回应用的主页面（通常是 index.html），否则会返回 404 错误。常见的服务器配置如下：

• Nginx:

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

• Apache:

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

HashRouter 的工作原理

HashRouter 使用 URL 的 hash 部分来管理路由。URL 看起来像 http://example.com/#/about。由于 hash 部分不会被发送到服务器，因此不需要服务器配置。这使得 HashRouter 非常适合在静态文件服务器或无法配置服务器的情况下使用。

优点

• 无需服务器配置：由于 hash 部分不会被发送到服务器，因此不需要任何服务器配置。
• 兼容性更好：HashRouter 兼容性更好，尤其是在不支持 HTML5 history API 的旧浏览器中。

缺点

• URL 不美观：URL 中包含 #，看起来不如 BrowserRouter 的 URL 干净。
• SEO 不友好：由于 hash 部分不会被搜索引擎索引，因此对 SEO 不友好。

使用场景

• BrowserRouter：适用于现代 Web 应用，尤其是需要 SEO 友好且服务器可以配置的情况。
• HashRouter：适用于静态文件服务器、无法配置服务器的情况，或者需要兼容旧浏览器的场景。

代码示例

// www.javascriptcn.com code example
// 使用 BrowserRouter
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  );
}

// 使用 HashRouter
import { HashRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  );
}