likes
comments
collection
share

前端路由原理及模拟实现React-router

作者站长头像
站长
· 阅读数 82

序言

在现代 Web 应用开发中，单页应用（SPA）已经成为主流，而实现 SPA 的核心之一就是路由功能。路由方案有2种实现方式，其中包括 Hash 路由、History 路由。本文将深入探讨这些不同路由方案的原理和模拟实现，帮助读者更好地理解 SPA 中路由的工作原理。

一、SPA 路由实现的原理

1. 什么是单页应用（SPA）和路由

单页应用（SPA）是一种基于 Web 技术的应用程序模型，它在加载初始页面后，通过异步加载数据和更新页面部分内容，实现动态交互和流畅的用户体验。路由是 SPA 中用于管理不同页面状态的机制，它将特定的 URL 映射到相应的页面或视图组件上。

2. SPA 路由的优势和原理

SPA 路由的主要优势是能够在不刷新整个页面的情况下进行页面导航和切换，提升用户体验和性能。SPA 路由的原理是通过监听 URL 的变化，根据不同的 URL 路径加载相应的页面内容或组件，并更新页面视图，而无需重新加载整个页面。这通常使用 JavaScript、浏览器历史 API（如 pushState 和 replaceState）以及事件监听来实现。

二、HashRouter 模拟实现与拆解

1. Hash 路由的原理

Hash 路由是通过修改 URL 的哈希部分（#）来实现路由切换的一种方案。当 URL 的哈希部分发生变化时，浏览器不会重新加载页面，而是触发 JavaScript 代码的执行，从而更新应用程序的视图。

特点：hash的实现全部在前端，不需要后端服务器配合，兼容性好。

实现原理过程拆解

    1. a标签设置路由菜单 （当href设置的是Hash router时，浏览器会自动将哈希部分添加到 URL 中，但不会触发页面的刷新或跳转）
    1. 进一步通过监听hashchange、load事件，自己写一个handleRoute回调处理前端业务逻辑。
    1. 浏览器左上角回退事件通过监听浏览器popstate事件，回调同样触发handleRoute
    1. 自己页面中的回退按钮通过模拟浏览器的back实现。

2. 从零开始手写 Hash 路由的步骤

在模拟实现 Hash 路由之前，我们需要进行以下拆解和解释：

  • 创建一个 HTML 文件，引入必要的 CSS 和 JavaScript 文件。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hash Router</title>
</head>
<body>
  <ul>
    <li><a href="#/">Home</a></li>
    <li><a href="#/about">About</a></li>
    <li><a href="#/contact">Contact</a></li>
  </ul>

  <div id="content"></div>

  <script src="router.js"></script>
</body>
</html>
  • 创建一个 JavaScript 文件，编写基本的路由逻辑。
// 路由映射表
const routes = {
  '/': 'Home',
  '/about': 'About',
  '/contact': '

Contact'
};

// 路由处理函数
function handleRoute() {
  const path = location.hash || '/';
  const content = document.getElementById('content');
  content.textContent = routes[path];
}

// 监听 hash 变化事件
window.addEventListener('hashchange', handleRoute);
window.addEventListener('load', handleRoute);

3. 路由的回退实现

在 Hash 路由中，可以通过监听 popstate 事件来实现路由的回退功能。在模拟实现中，我们可以通过以下步骤补充回退的实现：

  • 监听 popstate 事件。
// 监听 popstate 事件
window.addEventListener('popstate', handleRoute);

4. 页面中自定义的回退按钮

可以监听相关按钮点击事件，直接调用浏览器api History.back实现

// 回退按钮点击事件处理函数

function handleBackButton() {
history.back()
}

三、HistoryRouter 模拟实现与拆解

1. History 路由的原理

History 路由使用浏览器的 History API（pushState、replaceState 和 popstate）来实现路由的管理。这个 API 允许 JavaScript 动态修改浏览器的 URL，而不会触发页面的重新加载。

2. 从零开始手写 History 路由的步骤

在模拟实现 History 路由之前，我们需要进行以下拆解和解释：

  • 创建一个 HTML 文件，引入必要的 CSS 和 JavaScript 文件。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>History Router</title>
</head>
<body>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>

  <div id="content"></div>

  <script src="router.js"></script>
</body>
</html>
  • 创建一个 JavaScript 文件，编写基本的路由逻辑。
// 路由映射表
const routes = {
  '/': 'Home',
  '/about': 'About',
  '/contact': 'Contact'
};

// 路由处理函数
function handleRoute(path) {
  const content = document.getElementById('content');
  content.textContent = routes[path];
}

// 监听点击事件
document.addEventListener('click', function(event) {
  if (event.target.tagName === 'A') {
    event.preventDefault();
    const path = event.target.getAttribute('href');
    handleRoute(path);
    history.pushState({}, '', path);
  }
});

// 监听 popstate 事件
window.addEventListener('popstate', function() {
  const path = location.pathname;
  handleRoute(path);
});

3. 补充路由的回退实现

在 History 路由中，可以通过监听 popstate 事件来实现路由的回退功能。在模拟实现中，我们可以通过以下步骤补充回退的实现：

  • 监听 popstate 事件。
// 监听 popstate 事件
window.addEventListener('popstate', handleRoute);

四、React Router 模拟实现与拆解

React Router 提供了一种声明式的方式来定义应用程序的路由，并根据当前 URL 进行组件的渲染和导航。下面我将拆解 React Router 的实现原理，并给出一个简化的模拟实现。

4.1 React Router 的实现原理拆解：

  1. Router 组件： React Router 的核心组件是 Router，它负责管理应用程序的路由状态。在实际应用中，我们使用 BrowserRouter 或 HashRouter 组件作为 Router 的具体实现。它们分别基于 HTML5 History API 和 URL 哈希部分来管理路由。

  2. Route 组件： Route 组件用于匹配指定的路径，并渲染相应的组件。它可以通过 path 属性指定要匹配的路径，通过 component 属性指定要渲染的组件。

  3. Link 组件： Link 组件用于在应用程序中创建链接，并根据点击事件触发路由的切换。它生成一个 <a> 标签，并通过使用 history.pushState 或修改哈希部分来改变 URL。

  4. history 对象： React Router 使用 history 对象来管理浏览器的历史记录。这个对象可以通过不同的实现（如 createBrowserHistory、createHashHistory）来与特定的路由方案（如 HTML5 History API 或 URL 哈希部分）进行交互。

4.2 简化版模拟实现

基于以上原理，下面是一个简化的模拟实现，用于演示 React Router 的基本功能：

// Router.js
import React, { createContext, useContext, useState } from 'react';

const RouterContext = createContext();

export function Router({ children }) {
  const [currentPath, setCurrentPath] = useState(window.location.pathname);

  const handlePathChange = (path) => {
    setCurrentPath(path);
    window.history.pushState({}, '', path);
  };

  const contextValue = {
    currentPath,
    handlePathChange
  };

  return (
    <RouterContext.Provider value={contextValue}>
      {children}
    </RouterContext.Provider>
  );
}

export function Route({ path, component: Component }) {
  const { currentPath } = useContext(RouterContext);

  if (currentPath === path) {
    return <Component />;
  }

  return null;
}

export function Link({ to, children }) {
  const { handlePathChange } = useContext(RouterContext);

  const handleClick = (event) => {
    event.preventDefault();
    handlePathChange(to);
  };

  return (
    <a href={to} onClick={handleClick}>
      {children}
    </a>
  );
}

这个简化的模拟实现包含了核心的 Router、Route 和 Link 组件，以及一个使用 createContext 创建的上下文对象 RouterContext。

在 Router 组件中，我们使用 useState 来保存当前路径，并通过 handlePathChange 方法来更新当前路径并使用 history.pushState 改变 URL。

在 Route 组件中，我们检查当前路径是否与指定的路径匹配，如果匹配则渲染指定的组件。

在 Link 组件中，我们使用 handlePathChange 方法来处理点击事件，阻止默认的页面跳转行为，并调用 handlePathChange 更新当前路径。

这是一个非常简化的示例，真实的 React Router 实现要复杂得多，涉及更多的功能和细节，如嵌套路由、路由参数、重定向等。但通过这个简化的模拟实现，可以帮助你理解 React Router 的基本原理和核心组件的作用。

【参考资料】

转载自:https://juejin.cn/post/7244818841502367801
评论
请登录