从零实现前端路由：mini-react-router解析

前端

2023-11-22 23:01:10

简介

在现代前端开发中，路由扮演着至关重要的角色，它负责管理不同页面之间的无缝切换，为用户提供直观而愉悦的浏览体验。然而，构建一个功能齐全的路由系统并非易事，需要对底层技术原理有深入的理解。

为了解决这一难题，社区涌现出了众多优秀的路由库，其中React生态系统中的react-router-dom尤其广受欢迎。然而，对于一些希望对路由机制有更深入了解或需要定制化解决方案的开发者来说，自研一个轻量级路由库不失为一种有益的探索。

本文将带领大家从零实现一个名为mini-react-router的极简前端路由库，深入剖析路由跳转的核心机制，并提供详细的示例代码。

设计思想

mini-react-router的设计理念基于以下原则：

轻量级： 体积小巧，仅包含路由跳转的基本功能。
与react-router-dom兼容： 采用与react-router-dom类似的API，降低学习成本。
易于理解： 代码简洁清晰，易于阅读和维护。

核心实现

mini-react-router的核心代码如下：

// BrowserRouter.js
import React, { useState } from "react";

const BrowserRouter = (props) => {
  const [currentPath, setCurrentPath] = useState(window.location.pathname);

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

  return (
    <React.StrictMode>
      <Switch>
        {props.children.map((child) => (
          <Route key={child.props.path} path={child.props.path} component={child.props.component} />
        ))}
      </Switch>
    </React.StrictMode>
  );
};

export default BrowserRouter;

// Route.js
import React from "react";

const Route = (props) => {
  return props.path === window.location.pathname ? props.component : null;
};

export default Route;

// Link.js
import React from "react";

const Link = (props) => {
  const handleClick = (e) => {
    e.preventDefault();
    window.history.pushState(null, null, props.to);
  };

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

export default Link;

使用示例

import React from "react";
import ReactDOM from "react-dom";
import BrowserRouter from "./BrowserRouter";
import Route from "./Route";
import Link from "./Link";

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => (
  <BrowserRouter>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
    </ul>
    <hr />
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </BrowserRouter>
);

ReactDOM.render(<App />, document.getElementById("root"));