前端路由精粹，极简 react-mini-router 手写指南

前端

2023-11-19 21:23:43

在前端开发中，路由扮演着不可或缺的角色。在本文中，我们将通过一个精妙的 react-mini-router 实践，揭开前端路由的神秘面纱。

一方面，我们将深入探讨前端路由的本质，帮助你理解其工作原理和基本概念。另一方面，我们将重点关注一些常见的坑和注意点，让你在实际应用中轻松避免。

最后，我们还将一探 hash 路由和 history 路由的区别，让你全面掌握路由技术的关键点。

总而言之，本文旨在为前端开发者提供一个全面而实用的路由指南，让你在今后的项目中游刃有余。

前端路由，简单来说，就是一种在不刷新整个页面的情况下，改变页面内容的技术。它通常用于单页面应用，即在一个 HTML 页面中加载不同的内容。

实现前端路由的方法有很多，其中最常见的是 hash 路由和 history 路由。

hash 路由：通过修改 URL 中的锚点（#）来实现路由。这种方法简单易用，但也有其局限性，比如不能被搜索引擎抓取。
history 路由：通过修改浏览器的历史记录来实现路由。这种方法更加强大，也更受现代前端开发框架的青睐。

在 react-mini-router 中，我们将采用 history 路由的方式来实现路由。

在实现 react-mini-router 之前，我们需要先了解几个基本概念：

路由：一种在不刷新整个页面的情况下，改变页面内容的技术。
路径：一个指向特定资源（如 HTML 页面）的字符串。
组件：一个可复用的 React 组件，可以用于构建应用程序的用户界面。
路由组件：一个 React 组件，可以处理路由并渲染相应的组件。

有了这些基本概念，我们就可以开始实现 react-mini-router 了。

react-mini-router 的核心是 Router 组件。Router 组件负责监听浏览器的 URL 变化，并根据 URL 变化来渲染相应的组件。

Router 组件的代码如下：

import { useEffect, useState } from "react";
import { Route, Switch, useHistory } from "react-router-dom";

const Router = () => {
  const [url, setUrl] = useState(window.location.pathname);
  const history = useHistory();

  useEffect(() => {
    window.addEventListener("popstate", () => {
      setUrl(window.location.pathname);
    });
  }, []);

  return (
    <Switch>
      <Route path="/" exact component={HomePage} />
      <Route path="/about" component={AboutPage} />
      <Route path="/contact" component={ContactPage} />
    </Switch>
  );
};

export default Router;

Router 组件首先定义了一个 useState 钩子来存储当前的 URL。然后，它使用 useEffect 钩子来监听浏览器的 popstate 事件。当 popstate 事件发生时，Router 组件会更新当前的 URL。

接下来，Router 组件使用 Switch 和 Route 组件来定义路由规则。Route 组件指定了一个路径和一个组件。当浏览器中的 URL 与路径匹配时，Route 组件就会渲染相应的组件。

现在，我们已经实现了一个简单版的 react-mini-router。我们可以使用它来构建一个单页面应用。

以下是使用 react-mini-router 构建的一个单页面应用的示例：

import React from "react";
import Router from "./Router";
import HomePage from "./HomePage";
import AboutPage from "./AboutPage";
import ContactPage from "./ContactPage";

const App = () => {
  return (
    <Router>
      <HomePage />
      <AboutPage />
      <ContactPage />
    </Router>
  );
};

export default App;