第44章—Historyapi和ReactRouter实现原理

2651字约9分钟

2024-09-19

Router 是开发 React 应用的必备功能，那 React Router 是怎么实现的呢？

今天我们就来读一下 React Router 的源码吧！

首先，我们来学一下 History API，这是基础。

什么是 history 呢？

就是这个东西：

我打开了一个新的标签页、然后访问 baidu.com、sougou.com、taobao.com。

长按后退按钮，就会列出历史记录，这就是 history。

现在在这里：

history.length 是 5

点击两次后退按钮，或者执行两次 history.back()

就会回到这里：

这时候 history.length 依然是 5

因为前后的 history 都还保留着：

除了用 history.back、history.forward 在 history 之间切换外，还可以用 history.go

参数值是 delta：

history.go(0) 是刷新当前页面。

history.go(1) 是前进一个，相当于 history.forward()

history.go(-1) 是后退一个，相当于 history.back()

当然，你还可以 history.go(-2)、histroy.go(3) 这种。

比如当我执行 history.go(-2) 的时候，能直接从 taobao.com 跳到 sogou.com

你还可以通过 history.replaceState 来替换当前 history：

history.replaceState({aaa:1}, '', 'https://www.baidu.com?wd=光')

第一个参数是 state、第二个参数是 title，第三个是替换的 url。

不过第二个参数基本都不支持，state 倒是能拿到。

比如我在 https://www.baidu.com 那页 replaceState 为一个新的 url：

前后 history 都没变，只有当前的变了：

也就是这样：

当然，你还可以用 history.pushState 来添加一个新的 history：

history.pushState({bbb:1}, '', 'https://www.baidu.com?wd=东');

但有个现象，就是之后的 history 都没了：

也就是变成了这样：

为什么呢？

因为你是 history.pushState 的时候，和后面的 history 冲突了，也就是分叉了：

这时候自然只能保留一个分支，也就是最新的那个。

这时候 history.length 就是 3 了。

至此，history 的 length、go、back、forward、pushState、replaceState、state 这些 api 我们就用了一遍了。

还有个 history.scrollRestoration 是用来保留滚动位置的：

有两个值 auto、manual，默认是 auto，也就是会自动定位到上次滚动位置，设置为 manual 就不会了。

比如我访问百度到了这个位置：

打开个新页面，再退回来：

依然是在上次滚动到的位置。

这是因为它的 history.scrollRestoration 是 auto

我们把它设置为 manual 试试看：

这时候就算滚动到了底部，再切回来也会回到最上面。

此外，与 history 相关的还有个事件：popstate

当你在 history 中导航时，popstate 就会触发，比如 history.forwad、histroy.back、history.go。

但是 history.pushState、history.replaceState 这种并不会触发 popstate。

我们测试下：

history.pushState({aaa:1}, '', 'https://www.baidu.com?#/aaa');

history.pushState({bbb:2}, '', 'https://www.baidu.com?#/bbb');

我在 www.baidu.com 这个页面 pushState 添加了两个 history。

加上导航页一共 4 个：

然后我监听 popstate 事件：

window.addEventListener('popstate', event => {console.log(event)});

执行 history.back 和 history.forward 都会触发 popstate 事件：

事件包含 state，也可以从 target.location 拿到当前 url

但是当你 history.pushState、history.replaceState 并不会触发它：

也就是说添加、修改 history 不会触发 popstate，只有在 history 之间导航才会触发。

综上，history api 和 popstate 事件我们都过了一遍。

基于这些就可以实现 React Router。

有的同学说，不是还有个 hashchange 事件么？

确实，那个就是监听 hash 变化的。

基于它也可以实现 router，但很明显，hashchange 只能监听 hash 的变化，而 popstate 不只是 hash 变化，功能更多。

所以用 popstate 事件就足够了。

其实在 react router 里，就只用到了 popstate 事件，没用到 hashchange 事件：

接下来我们就具体来看下 React Router 是怎么实现的吧。

创建个 react 项目：

npx create-react-app react-router-test

安装 react-router 的包：

npm install react-router-dom

然后在 index.js 写如下代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  createBrowserRouter,
  Link,
  Outlet,
  RouterProvider,
} from "react-router-dom";

function Aaa() {
  return <div>
    <p>aaa</p>
    <Link to={'/bbb/111'}>to bbb</Link>
    <br/>
    <Link to={'/ccc'}>to ccc</Link>
    <br/>
    <Outlet/>
  </div>;
}

function Bbb() {
  return 'bbb';
}

function Ccc() {
  return 'ccc';
}

function ErrorPage() {
  return 'error';
}

const routes = [
  {
    path: "/",
    element: <Aaa/>,
    errorElement: <ErrorPage/>,
    children: [
      {
        path: "bbb/:id",
        element: <Bbb />,
      },
      {
        path: "ccc",
        element: <Ccc />,
      }    
    ],
  }
];
const router = createBrowserRouter(routes);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RouterProvider router={router} />);