手写React Router

原理

目前常见的路由分为两种，HashRouter和BrowserRouter

HashRouter

hash路由的方式主要是通过改变hash值来改变url，因为只是改变hash，所以并不会触发页面刷新，很适合用在单页应用局部更新，window提供监听hashChange方法来监听hash值的改变去更新我们的单页

window.addEventListener('hashchange', function(e) {
  console.log('hashchange', e)
  // 更新页面
})

BrowserRouter

history是h5新出的api，让我们可以在改变url而不刷新页面，主要的几个api是：

History.back(): 返回浏览器会话历史中的上一页，跟浏览器的回退按钮功能相同
History.forward():指向浏览器会话历史中的下一页，跟浏览器的前进按钮相同。
History.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页。
History.pushState():pushState可以将给定的数据压入到浏览器会话历史栈中，该方法接收3个参数，对象，title和一串url。pushState后会改变当前页面url，但是不会伴随着刷新。
History.replaceState():replaceState将当前的会话页面的url替换成指定的数据，replaceState后也会改变当前页面的url，但是也不会刷新页面。
以上只是实现改变url不刷新页面，我们还需要监听用户前进后退的变化。popstate是history的一个监听事件，可以监听history的变化
好了，基本上就是这个原理

实现

实现部分主要是利用react的context api来存储路由信息，子组件根据context值去渲染，代码是由hook实现，不了解的，看之前，学习一下React Hook，下面我们来实现一下BrowserRouter

BrowserRouter

import React, { useState } from "react";
  
let set; // 保存setUrl，因为监听事件咱们值加入一次，所以放外面
function popstate(e) {
  set(window.location.pathname);
}
// 创建context
export const RouterContext = React.createContext(window.location.pathname);

export default function({ children }) {
  const [url, setUrl] = useState(window.location.pathname);
  set = setUrl;

  window.addEventListener("popstate", popstate);

  const router = {
    history: {
      push: function(url, state, title) {
        window.history.pushState(state, title, url);
        setUrl(url);
      },
      replace: function(url, state, title) {
        window.history.replaceState(state, title, url);
        setUrl(url);
      },
      // 下面也需要嵌入setUrl，暂不处理
      go: window.history.go,
      goBack: window.history.back,
      goForward: window.history.forward,
      length: window.history.length
    },
    url: url
  };

  return (
    <RouterContext.Provider value={router}>{children}</RouterContext.Provider>
  );
}

Route

import React, { useContext } from "react";
import { RouterContext } from "./BrowserRouter";

function Route({ component, path }) {
  // 获取context
  const { history, url } = useContext(RouterContext);
  const match = {
    path,
    url
  };
  const Component = component;
  return url === path && <Component history={history} match={match} />;
}

export default Route;

Link

import React, { useContext } from "react";
import { RouterContext } from "./BrowserRouter";
import styled from "styled-components";

const A = styled.a`
  text-decoration: none;
  padding: 5px;
`;

function Link({ children, to }) {
  const { history } = useContext(RouterContext);
  const onClick = e => {
    e.preventDefault();
    history.push(to);
  };
  return (
    <A href={to} onClick={onClick}>
      {children}
    </A>
  );
}

export default Link;

总结

查看Github源码
其实很简单的一个东西，了解原理很容易实现，看了这篇文章，你也可以试着去实现一下HashRouter.

最后编辑于：2019.06.01 19:09:24