手写 react-mini-router

前言

前端路由一直是一个很经典的话题，不管是日常的使用还是面试中都会经常遇到。本文通过实现一个简单版的 react-router 来一起揭开路由的神秘面纱。

在这里，你可以学习到：

前端路由本质上是什么。
前端路由里的一些坑和注意点。
hash 路由和 history 路由的区别。
Router 组件和 Route 组件分别是做什么的。

路由的本质

简单来说，浏览器端路由其实并不是真实的网页跳转（和服务器没有任何交互），而是纯粹在浏览器端发生的一系列行为，本质上来说前端路由就是：

对 url 进行改变和监听，来让某个 dom 节点显示对应的视图。

仅此而已。新手不要被路由这个概念给吓到。

路由的区别

一般来说，浏览器端的路由分为两种：

1.hash 路由，特征是 url 后面会有 # 号，如baidu.com/#foo/bar/baz。
2.history 路由，url 和普通路径没有差异。如baidu.com/foo/bar/baz。

我们已经讲过了路由的本质，那么实际上只需要搞清楚两种路由分别是如何 改变 ，并且组件是如何 监听并完成视图的展示 ，一切就真相大白了。

不卖关子，先分别谈谈两种路由用什么样的 api 实现前端路由：

hash

hash
通过 location.hash = 'foo'这样的语法来 改变 ，路径就会由 baidu.com 变更为baidu.com/#foo 。

通过 window.addEventListener('hashchange') 这个事件，就可以 监听 到hash 值的变化。

history

其实是用了 history.pushState 这个 API 语法 改变 ，它的语法乍一看比较怪异，先看下 mdn 文档里对它的定义：

history.pushState(state, title[, url])

其中 state 代表状态对象，这让我们可以给每个路由记录创建自己的状态，并且它还会序列化后保存在用户的磁盘上，以便用户重新启动浏览器后可以将其还原。

title 当前没啥用。

url 在路由中最重要的 url 参数反而是个可选参数，放在了最后一位。

通过 history.pushState({}, '', foo) ，可以让 baidu.com 变化为 baidu.com/foo 。

为什么路径更新后，浏览器页面不会重新加载？

为什么路径更新后，浏览器页面不会重新加载？

这里我们需要思考一个问题，平常通过 location.href = 'baidu.com/foo'这种方式来跳转，是会让浏览器重新加载页面并且请求服务器的，但是 history.pushState的神奇之处就在于它可以让 url 改变，但是不重新加载页面，完全由用户决定如何处理这次 url 改变。

因此，这种方式的前端路由必须在支持 histroy API 的浏览器上才可以使用。

为什么刷新后会 404？

本质上是因为刷新以后是带着 baidu.com/foo 这个页面去请求服务端资源的，但是服务端并没有对这个路径进行任何的映射处理，当然会返回 404，处理方式是让服务端对于"不认识"的页面,返回index.html，这样这个包含了前端路由相关 js 代码的首页，就会加载你的前端路由配置表，并且此时虽然服务端给你的文件是首页文件，但是你的 url 上是 baidu.com/foo ，前端路由就会加载/foo这个路径相对应的视图，完美的解决了 404 问题。

history 路由的 监听也有点坑，浏览器提供了 window.addEventListener('popstate')事件，但是它只能监听到浏览器回退和前进所产生的路由变化，对于主动的 pushState 却监听不到。解决方案当然有，下文实现 react-router 的时候再细讲~

实现 react-mini-router

本文实现的 react-router 基于 history 版本，用最小化的代码还原路由的主要功能，所以不会有正则匹配或者嵌套子路由等高阶特性，回归本心，从零到一实现最简化的版本。

实现 history

对于 history难用的官方 API，我们专门抽出一个小文件对它进行一层封装，对外提供：

history.push
history.listen

这两个 API，减轻用户的心智负担。

我们利用 观察者模式 封装了一个简单的 listen API，让用户可以监听到 history.push 所产生的路径改变。

// 存储 history.listen 的回调函数
let listeners: Listener[] = [];
function listen(fn: Listener) {
  listeners.push(fn);
  return function() {
    listeners = listeners.filter(listener => listener !== fn);
  };
}
复制代码

这样外部就可以通过：

history.listen(location => {
  console.log('changed', location);
});
复制代码

样的方式感知到路由的变化了，并且在 location 中，我们还提供了 state 、 pathname 、 search 等关键的信息。

实现改变路径的核心方法 push 也很简单：

function push(to: string, state?: State) {
  // 解析用户传入的 url
  // 分解成 pathname、search 等信息
  location = getNextLocation(to, state);
  // 调用原生 history 的方法改变路由
  window.history.pushState(state, '', to);
  // 执行用户传入的监听函数
  listeners.forEach(fn => fn(location));
}
复制代码

在 history.push('foo') 的时候，本质上就是调用了 window.history.pushState 去改变路径，并且通知 listen 所挂载的回调函数去执行。

当然，别忘了用户点击浏览器后退前进按钮的行为，也需要用 popstate 这个事件来监听，并且执行同样的处理：

// 用于处理浏览器前进后退操作
window.addEventListener('popstate', () => {
  location = getLocation();
  listeners.forEach(fn => fn(location));
});
复制代码

接下来我们需要实现 Router 和 Route 组件，你就会看到它们是如何和这个简单的 history 库结合使用了。

实现 Router

Router 的核心原理就是通过 Provider 把location 和 history 等路由关键信息传递给子组件，并且在路由发生变化的时候要让子组件可以感知到：

import React, { useState, useEffect, ReactNode } from 'react';
import { history, Location } from './history';
interface RouterContextProps {
  history: typeof history;
  location: Location;
}

export const RouterContext = React.createContext<RouterContextProps | null>(
  null,
);

export const Router: React.FC = ({ children }) => {
  const [location, setLocation] = useState(history.location);
  // 初始化的时候 订阅 history 的变化
  // 一旦路由发生改变 就会通知使用了 useContext(RouterContext) 的子组件去重新渲染
  useEffect(() => {
    const unlisten = history.listen(location => {
      setLocation(location);
    });
    return unlisten;
  }, []);

  return (
    <RouterContext.Provider value={{ history, location }}>
      {children}
    </RouterContext.Provider>
  );
};
复制代码

注意看注释的部分，我们在组件初始化的时候利用 history.listen 监听了路由的变化，一旦路由发生改变，就会调用 setLocation 去更新location 并且通过 Provider 传递给子组件。

并且这一步也会触发Provider 的 value 值的变化，通知所有用useContext 订阅了 history 和 location 的子组件去重新render 。

实现 Route

Route 组件接受 path 和 children 两个prop，本质上就决定了在某个路径下需要渲染什么组件，我们又可以通过 Router 的 Provider 传递下来的 location信息拿到当前路径，所以这个组件需要做的就是判断当前的路径是否匹配，渲染对应组件。

import { ReactNode } from 'react';
import { useLocation } from './hooks';

interface RouteProps {
  path: string;
  children: ReactNode;
}

export const Route = ({ path, children }: RouteProps) => {
  const { pathname } = useLocation();
  const matched = path === pathname;

  if (matched) {
    return children;
  }
  return null;
};
复制代码

这里的实现比较简单，路径直接用了全等，实际上真正的实现考虑的情况比较复杂，使用了 path-to-regexp这个库去处理动态路由等情况，但是核心原理其实就是这么简单。

实现 useLocation、useHistory

这里就很简单了，利用 useContext 简单封装一层，拿到 Router 传递下来的 history 和 location即可。

import { useContext } from 'react';
import { RouterContext } from './Router';

export const useHistory = () => {
  return useContext(RouterContext)!.history;
};

export const useLocation = () => {
  return useContext(RouterContext)!.location;
};
复制代码

实现验证 demo

至此为止，以下的路由 demo 就可以跑通了：

import React, { useEffect } from 'react';
import { Router, Route, useHistory } from 'react-mini-router';

const Foo = () => 'foo';
const Bar = () => 'bar';

const Links = () => {
  const history = useHistory();

  const go = (path: string) => {
    const state = { name: path };
    history.push(path, state);
  };

  return (
    <div className="demo">
      <button onClick={() => go('foo')}>foo</button>
      <button onClick={() => go('bar')}>bar</button>
    </div>
  );
};

export default () => {
  return (
    <div>
      <Router>
        <Links />
        <Route path="foo">
          <Foo />
        </Route>
        <Route path="bar">
          <Bar />
        </Route>
      </Router>
    </div>
  );
};
复制代码

结语

前端路由的原理，其实它只是对浏览器提供 API 的一个封装，以及在框架层去联动做对应的渲染，换个框架 vue-router 也是类似的原理。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,029评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,395评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,570评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,535评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,650评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,850评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,006评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,747评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,207评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,342评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,964评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2赞 349