react-router/v5之Router、Route、Redirect、Switch源码解析

class Router extends React.Component {
  // 创建match对象
  static computeRootMatch(pathname) {
    return { path: "/", url: "/", params: {}, isExact: pathname === "/" };
  }

  constructor(props) {
    super(props);
    // ... 定义属性
  }

  componentDidMount() {
    //... 做一些初始化
  }

  componentWillUnmount() {
    //... 组件销毁重置属性值
  }

  render() {
    return (
      // 1、返回context上下文
      <RouterContext.Provider
        // 2、注入history、location、match等全局变量
        value={{
          history: this.props.history,
          location: this.state.location,
          match: Router.computeRootMatch(this.state.location.pathname),
          staticContext: this.props.staticContext
        }}
      >
        <HistoryContext.Provider
          children={this.props.children || null}
          value={this.props.history}
        />
      </RouterContext.Provider>
    );
  }
}

class Route extends React.Component {
  render() {
    return (
      <RouterContext.Consumer>
        {context => {
          // 1、<Route>必须在<Router>内部
          invariant(context, "You should not use <Route> outside a <Router>");

          const location = this.props.location || context.location;
          
          // 2、通过matchPath方法将path值和当前路由进行匹配，如果<Switch>中已经匹配过，直接使用匹配结果
          const match = this.props.computedMatch
            ? this.props.computedMatch // <Switch> already computed the match for us
            : this.props.path
            ? matchPath(location.pathname, this.props)
            : context.match;

          const props = { ...context, location, match };

          let { children, component, render } = this.props;
          
          // ... 

          return (
            <RouterContext.Provider value={props}>
              {
                // 3、如果匹配当前路由，就渲染children或component或render()，否则返回null
                props.match
                ? children
                  ? typeof children === "function"
                    ? __DEV__
                      ? evalChildrenDev(children, props, this.props.path)
                      : children(props)
                    : children
                  : component
                  ? React.createElement(component, props)
                  : render
                  ? render(props)
                  : null
                : typeof children === "function"
                ? __DEV__
                  ? evalChildrenDev(children, props, this.props.path)
                  : children(props)
                : null}
            </RouterContext.Provider>
          );
        }}
      </RouterContext.Consumer>
    );
  }
}

// 1、可以看到，路由匹配使用的是path-to-regexp
import pathToRegexp from "path-to-regexp";

// ... 定义缓存变量

function compilePath(path, options) {
  // ... 读取缓存

  const keys = [];
  // 2、使用pathToRegexp获取匹配正则表达式
  const regexp = pathToRegexp(path, keys, options);
  const result = { regexp, keys };

  // ... 存入缓存

  return result;
}

function matchPath(pathname, options = {}) {
  // 将路径值统一放到options.path中
  if (typeof options === "string" || Array.isArray(options)) {
    options = { path: options };
  }

  const { path, exact = false, strict = false, sensitive = false } = options;

  const paths = [].concat(path);
  
  return paths.reduce((matched, path) => {
    if (!path && path !== "") return null;
    // 3、只要匹配到就直接返回匹配结果
    if (matched) return matched;
    
    // 4、获取路由匹配正则表达式
    const { regexp, keys } = compilePath(path, {
      end: exact,
      strict,
      sensitive
    });
    // 5、使用正则进行路由匹配
    const match = regexp.exec(pathname);
    // 6、没有匹配结果返回null
    if (!match) return null;

    const [url, ...values] = match;
    const isExact = pathname === url;
    // 7、如果设置了exact，进行全匹配
    if (exact && !isExact) return null;

    // 8、匹配结果
    return {
      path, // the path used to match
      url: path === "/" && url === "" ? "/" : url, // the matched portion of the URL
      isExact, // whether or not we matched exactly
      params: keys.reduce((memo, key, index) => {
        memo[key.name] = values[index];
        return memo;
      }, {})
    };
  }, null);
}

function Redirect({ computedMatch, to, push = false }) {
  return (
    <RouterContext.Consumer>
      {context => {
        // 1、<Redirect>必须在<Router>中
        invariant(context, "You should not use <Redirect> outside a <Router>");

        const { history, staticContext } = context;
        // 2、重定向跳转的方式
        const method = push ? history.push : history.replace;
        // 3、使用to属性创建路由对象
        const location = createLocation(
          computedMatch
            ? typeof to === "string"
              ? generatePath(to, computedMatch.params)
              : {
                  ...to,
                  pathname: generatePath(to.pathname, computedMatch.params)
                }
            : to
        );

        // ... staticContext非空时的处理，可先忽略

        return (
          // 4、Lifecycle组件就是一个简单的class组件，组件挂载时回调onMount，更新时回调onUpdate
          <Lifecycle
            onMount={() => {
              // 5、Redirect组件只要挂载时就会执行路由跳转方法
              method(location);
            }}
            onUpdate={(self, prevProps) => {
              // 6、需要更新的to路由信息
              const prevLocation = createLocation(prevProps.to);
              // 7、如果新的to路由和旧的to路由不相等，则进行重定向，避免死循环
              if (
                !locationsAreEqual(prevLocation, {
                  ...location,
                  key: prevLocation.key
                })
              ) {
                // 8、执行路由跳转方法
                method(location);
              }
            }}
            to={to}
          />
        );
      }}
    </RouterContext.Consumer>
  );
}

class Switch extends React.Component {
  render() {
    return (
      <RouterContext.Consumer>
        {context => {
          // 1、<Switch>必须在<Router>中
          invariant(context, "You should not use <Switch> outside a <Router>");

          const location = this.props.location || context.location;

          let element, match;

          // 2、遍历Switch的子节点children
          React.Children.forEach(this.props.children, child => {
            // 3、如果还没有匹配到结果
            if (match == null && React.isValidElement(child)) {
              element = child;
              
              // 4、获取Route的path、或Redirect的from属性值
              const path = child.props.path || child.props.from;
              
              // 5、使用matchPath将子节点的路径和当前路径进行匹配
              match = path
                ? matchPath(location.pathname, { ...child.props, path })
                : context.match;
            }
          });
          
          // 6、如果匹配到，返回对应的子节点；如果没有匹配到，返回null
          return match
            ? React.cloneElement(element, { location, computedMatch: match })
            : null;
        }}
      </RouterContext.Consumer>
    );
  }
}

<Switch>
    // ... 其他Route和Redirect组件必须放前面
    <Redirect from="*" to="/" />
</Switch>