从头写个 React Router

前端

2024-02-22 20:13:18

让我们先回顾一下 React Router 的作用：它负责管理应用中的页面导航，允许用户在不同的页面之间跳转，而不会刷新整个页面。那么，我们该如何从零开始编写一个自己的 React Router 呢？

前置知识

在开始动手之前，你需要对以下概念有所了解：

React 路由基础
路径和参数解析
浏览器历史 API

步骤

1. 初始化状态

首先，我们需要一个表示当前路由状态的对象。这个对象应该包含以下属性：

路径
参数
历史记录

2. 路径解析

接下来，我们需要解析传入的路径，以提取路径和参数。我们可以使用 path-to-regexp 库来简化此过程。

3. 路由变更

当用户导航到新页面时，我们需要更新路由状态。我们可以使用 history 库来管理浏览器历史记录并触发路由更新。

4. 渲染组件

一旦路由状态更新，我们需要根据当前路径渲染相应的组件。我们可以使用 Switch 和 Route 组件来实现此目的。

示例实现

import { useState, useEffect, useMemo } from "react";
import { useHistory, useLocation } from "react-router-dom";
import { matchPath } from "path-to-regexp";

const Router = () => {
  const [state, setState] = useState({
    path: null,
    params: null,
    history: null,
  });

  const history = useHistory();
  const location = useLocation();

  useEffect(() => {
    const updateState = () => {
      const { pathname } = location;
      const match = matchPath(pathname, "/:page");

      setState({
        path: pathname,
        params: match ? match.params : null,
        history: history,
      });
    };

    updateState();
    history.listen(updateState);
  }, [history, location]);

  const routes = [
    {
      path: "/page-1",
      component: Page1,
    },
    {
      path: "/page-2",
      component: Page2,
    },
  ];

  const currentRoute = useMemo(
    () => routes.find(({ path }) => state.path === path),
    [state.path, routes]
  );

  return currentRoute ? <currentRoute.component /> : null;
};