关于前端路由跳转的一些深层次思考

关于前端路由跳转的一些深层次思考

最近笔者在进行一个electron项目的架构改动，在改动的过程中对electron内涵的前端项目中的路由跳转做了一些个人的思考，下面将思考的结果以问答的形式整理出来，希望能够对您有所帮助！

1. 是否可以将前端路由理解成通过监听url的改变执行了特定的回调，从而重新渲染了页面的内容?

这种理解是没有问题的！

• 当使用前端路由库（如 React Router）时，它会提供一组路由规则和对应的回调函数或组件。这些路由规则定义了 URL 路径与要显示的内容之间的映射关系。
• 当用户在应用程序中导航时，前端路由库会监听浏览器 URL 的变化。当 URL 发生改变时，相应的回调函数或组件将被触发，从而重新渲染页面的内容。
• 例如，当用户访问 "/about" 路径时，前端路由库会检测到 URL 的变化，并根据配置的路由规则调用与该路径匹配的回调函数或组件。这可能是一个用于渲染关于页面的组件或执行某些逻辑的回调函数。
• 通过这种方式，前端路由实现了在不刷新整个页面的情况下，根据 URL 的变化来更新页面内容。它允许构建单页面应用（SPA），提供更流畅和快速的用户体验。
• 需要注意的是，前端路由只处理页面内容的切换和渲染，而不涉及向服务器请求新的 HTML 页面。所有的 HTML、CSS 和 JavaScript 文件通常在应用程序加载时一次性获取，并存储在客户端。通过前端路由，应用程序可以根据 URL 的变化动态显示不同的页面内容，而无需重新加载整个页面。

2. 前端路由修改了页面的URL，为什么没有触发页面跳转的行为？是什么组织了浏览器的默认行为？

当使用 pushState 或 replaceState 方法修改 URL 时，页面不会发生跳转，但 URL 将会更新。这使得前端路由能够处理 URL 的变化并进行相应的渲染，而无需刷新整个页面。

下面是一个使用 pushState 和 replaceState 的简单示例：

// 使用 pushState 修改 URL，不发生页面跳转
window.history.pushState(null, '', '/new-path');

// 使用 replaceState 修改 URL，不发生页面跳转
window.history.replaceState(null, '', '/another-path');

3. 发生前端路由跳转的时候，包括通过Browser或者Hash的方式，会引触发什么样的事件？

分别触发两种事件，事件名称为：popstate和hashchange

4. 在electron套接的前端项目中应该使用哪种前端路由方式？

HashRouter 和 BrowserRouter 是 React Router 提供的两种路由器实现。

• HashRouter：它使用 URL 中的哈希部分（#）来模拟前端路由。例如，URL 可能会变成 http://localhost/#/path/to/route。这种方式在 Electron 中是可行的，因为哈希部分的变化不会被操作系统或文件系统解释为指向不同文件的请求，从而避免了潜在的问题。

• BrowserRouter：它使用 HTML5 的历史记录（history）API 来实现前端路由。它的 URL 形式更类似于传统的 web 应用程序，例如 http://localhost/path/to/route。但在 Electron 中，直接使用 BrowserRouter 可能会导致问题，因为 Electron 应用程序并不像通过 web 服务器提供的应用程序那

样直接映射到文件系统路径。

• 综上所述，为了确保在 Electron 中正确处理路由，使用 HashRouter 是更安全和可靠的选择。它能够正常工作，并且不会产生与文件系统和操作系统交互的问题。请注意，使用 HashRouter 时，URL 中的哈希部分对于 Electron 应用程序来说是没有实际意义的，因为它们并不会传递给服务器端。

5. 自定义路由回调

可以使用useHistory或者useLocation为路由跳转自定义一些回调:

5.1. 借助 React Router 提供的 hooks ：如果正在使用 React Router 这样的路由库，可以使用其提供的 hooks 来获取当前的路由信息，而不是直接使用原生的 location 对象。

示例：

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();

  // 使用 location 对象进行操作

  return (
    // JSX 渲染
  );
}

通过使用 useLocation hook，可以获得当前的路由位置信息，并在组件内部使用它来执行所需的操作。

5.2. 使用监听路由变化的事件 ：某些路由库会提供一些事件或机制来监听路由的变化。可以订阅这些事件，在路由发生变化时更新项目中的 location 对象。

示例（React Router）：

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();
  const [location, setLocation] = useState(history.location);

  useEffect(() => {
    const unlisten = history.listen((newLocation) => {
      setLocation(newLocation);
    });

    return () => {
      unlisten();
    };
  }, [history]);

  // 使用 location 对象进行操作

  return (
    // JSX 渲染
  );
}

在上述示例中，使用了 useHistory hook 来获取路由的历史对象，并通过 listen 方法订阅路由变化。每当路由发生变化时，更新 location 对象并执行相应的操作。

无论选择哪种处理方法，都能在前端路由发生跳转后继续使用 location 对象。这样可以保持代码的一致性，并且能够与路由

6. 手写js代码，完成哈希前端路由功能

• 改变hash值的方式是直接对window.location.hash赋值
• hash值改变触发的回调函数为hashchange

// 获取当前哈希值
function getCurrentHash() {
  return window.location.hash.slice(1);
}

// 更新哈希值
function updateHash(hash) {
  window.location.hash = hash;
}

// 哈希路由处理函数
function handleHashRoute(route) {
  // 根据不同的路由执行相应的操作
  if (route === 'home') {
    console.log('Home Page');
    // 执行 Home 页面的操作
  } else if (route === 'about') {
    console.log('About Page');
    // 执行 About 页面的操作
  } else if (route === 'contact') {
    console.log('Contact Page');
    // 执行 Contact 页面的操作
  } else {
    console.log('Unknown Page');
    // 处理未知页面或错误路由
  }
}

// 监听哈希变化事件
window.addEventListener('hashchange', function () {
  const newHash = getCurrentHash(); // 获取新的哈希值
  handleHashRoute(newHash); // 处理路由
});

// 初始化时执行一次哈希路由处理
handleHashRoute(getCurrentHash());