React两种路由模式的实现原理

React 中常用的两种路由模式是 HashRouter 和 BrowserRouter。它们分别使用不同的方式来管理和监听 URL 变化。以下是这两种路由模式的实现原理。

1. HashRouter

HashRouter 使用 URL 的哈希部分（即 # 后面的部分）来保持 UI 和 URL 的同步。哈希部分不会被发送到服务器，因此这种方式不需要服务器配置。

实现原理

• URL 结构：http://example.com/#/path
• 监听方式：通过监听 hashchange 事件来检测 URL 变化。
• 优点：简单易用，不需要服务器配置。
• 缺点：URL 中包含 #，不太美观。

工作流程

1. 初始化：应用启动时，读取 window.location.hash，并根据哈希值渲染相应的组件。
2. 导航：当用户点击链接或调用导航函数时，更新 window.location.hash。
3. 监听变化：通过监听 hashchange 事件，检测 URL 哈希部分的变化，并根据新的哈希值渲染相应的组件。

示例代码

import React, { useEffect, useState } from "react";

const HashRouterExample = () => {
  const [page, setPage] = useState(window.location.hash.substring(1) || "home");

  useEffect(() => {
    const handleHashChange = () => {
      setPage(window.location.hash.substring(1) || "home");
    };

    window.addEventListener("hashchange", handleHashChange);

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

  const navigateTo = (page) => {
    window.location.hash = `#${page}`;
  };

  return (
    <div>
      <nav>
        <button onClick={() => navigateTo("home")}>Home</button>
        <button onClick={() => navigateTo("about")}>About</button>
        <button onClick={() => navigateTo("contact")}>Contact</button>
      </nav>
      <div>
        {page === "home" && <div>Home Page</div>}
        {page === "about" && <div>About Page</div>}
        {page === "contact" && <div>Contact Page</div>}
      </div>
    </div>
  );
};

export default HashRouterExample;

2. BrowserRouter

BrowserRouter 使用 HTML5 的 history API 来保持 UI 和 URL 的同步。这种方式需要服务器配置，以确保所有路由都指向同一个 HTML 文件。

实现原理

• URL 结构：http://example.com/path
• 监听方式：通过监听 popstate 事件来检测 URL 变化。
• 优点：URL 更加美观，没有 #。
• 缺点：需要服务器配置，以确保所有路由都指向同一个 HTML 文件。

工作流程

1. 初始化：应用启动时，读取 window.location.pathname，并根据路径渲染相应的组件。
2. 导航：当用户点击链接或调用导航函数时，使用 history.pushState 更新 URL。
3. 监听变化：通过监听 popstate 事件，检测浏览器历史记录的变化，并根据新的路径渲染相应的组件。

示例代码

import React, { useEffect, useState } from "react";

const BrowserRouterExample = () => {
  const [page, setPage] = useState(window.location.pathname.substring(1) || "home");

  useEffect(() => {
    const handlePopState = (event) => {
      setPage(window.location.pathname.substring(1) || "home");
    };

    window.addEventListener("popstate", handlePopState);

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

  const navigateTo = (page) => {
    const state = { page };
    const title = page.charAt(0).toUpperCase() + page.slice(1) + " Page";
    const url = `/${page}`;
    history.pushState(state, title, url);
    setPage(page);
  };

  return (
    <div>
      <nav>
        <button onClick={() => navigateTo("home")}>Home</button>
        <button onClick={() => navigateTo("about")}>About</button>
        <button onClick={() => navigateTo("contact")}>Contact</button>
      </nav>
      <div>
        {page === "home" && <div>Home Page</div>}
        {page === "about" && <div>About Page</div>}
        {page === "contact" && <div>Contact Page</div>}
      </div>
    </div>
  );
};

export default BrowserRouterExample;

服务器配置

对于 BrowserRouter，你需要配置服务器以处理所有路由请求。例如，在 Apache 中，你可以使用 .htaccess 文件：

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

在 Nginx 中，你可以在配置文件中添加以下内容：

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

总结

• HashRouter：使用 URL 的哈希部分，通过 hashchange 事件监听 URL 变化，不需要服务器配置。
• BrowserRouter：使用 HTML5 的 history API，通过 popstate 事件监听 URL 变化，需要服务器配置以处理所有路由请求。

选择哪种路由模式取决于你的项目需求和服务器配置情况。