化繁为简：前端路由 Hash vs History

化繁为简：前端路由 Hash vs History

在现代网络应用程序中，前端路由是一种管理应用程序URL和页面状态的机制，它可以帮助开发人员构建复杂的单页面应用程序（SPA），同时保持良好的用户体验。在前端路由的世界中，有两种主要的实现方式：哈希路由和历史路由。

哈希路由

哈希路由使用URL的哈希部分（#）来存储路由信息，这种方法简单易用，并且不需要任何服务器端配置，因此非常适合快速构建SPA。哈希路由的URL通常如下所示：

https://example.com/app/#home

优点

• 易于实现：哈希路由非常简单，不需要任何特殊的服务器端配置，即使是前端新手也可以轻松掌握。
• 跨浏览器兼容性好：哈希路由在所有主流浏览器中都受到支持，包括IE。

缺点

• 不美观：哈希路由的URL中带有#号，这会让URL看起来不太美观，特别是对于搜索引擎优化（SEO）来说，这种URL并不能直接提供有用的信息。
• 无法在浏览器后退按钮中使用：当用户使用浏览器后退按钮时，哈希路由不会触发任何页面变化，这可能会导致用户感到困惑。

历史路由

历史路由使用浏览器的历史记录API来管理路由信息，这种方法可以提供更美观、更友好的用户体验，但需要更多的服务器端配置。历史路由的URL通常如下所示：

https://example.com/app/home

优点

• 美观：历史路由的URL不包含#号，看起来更加美观，也有利于SEO。
• 可以使用浏览器后退按钮：当用户使用浏览器后退按钮时，历史路由会触发页面变化，这提供了更好的用户体验。

缺点

• 服务器端配置：历史路由需要服务器端配置，这对于新手来说可能有点复杂。
• 跨浏览器兼容性差：历史路由在IE浏览器中不受支持，这可能会导致兼容性问题。

总结

哈希路由和历史路由各有优缺点，在选择时应根据具体情况做出权衡。如果应用程序需要快速构建、跨浏览器兼容性好，并且不关心URL的美观和SEO，那么哈希路由是一个不错的选择。如果应用程序需要更美观、更友好的用户体验，并且愿意进行服务器端配置，那么历史路由是一个更好的选择。

示例

下面是一个使用哈希路由的简单示例：

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

ReactDOM.render(
  <RouterProvider router={router} />,
  document.getElementById('root')
);

下面是一个使用历史路由的简单示例：

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { createHashHistory } from "history";

const history = createHashHistory();

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
], {
  history
});

ReactDOM.render(
  <RouterProvider router={router} />,
  document.getElementById('root')
);

希望这篇博文能帮助您更好地理解哈希路由和历史路由。