react 6 react-router源码 matchPath

path-to-regexp 链接与使用方式点击这里进入
https://www.npmjs.com/package/path-to-regexp

import { pathToRegexp } from "path-to-regexp";

/**
 *  react-router
 *   match
 *
 * @param {*} path 路径规则
 * @param {*} pathname 具体的地址
 * @param {*} option 相关配置  配置是一个对象，该对象中，可以出现： exact, sensitive,strict
 */

export default function matchPath(path, pathname, options) {
  const keys = [];
  const regExp = pathToRegexp(path, keys, getOptions(options));
  const result = regExp.exec(pathname);
  //   console.log(result, keys);
  if (!result) {
    return; //没有匹配结果
  } else {
    let execArr = Array.from(result);
    execArr = execArr.slice(1);
    // console.log(execArr)
    const params = getParams(execArr, keys);
    // console.log(params);
    if (!params) {
      return null;
    }
    return {
      isExact: pathname === result[0],
      params,
      path,
      url: result[0]
    };
  }
}

/**
 * 将传入的react-router的配置，转换为path-to-regexp的配置
 * @param {*} option
 */

function getOptions(options = {}) {
  const defaultOptions = {
    exact: false,
    sensitive: false,
    strict: false
  };
  const opts = { ...defaultOptions, ...options };
  return {
    sensitive: opts.sensitive,
    strict: opts.sensitive,
    end: opts.exact
  };
}

/**
 * 根据匹配的分组结果，得到一个params对象
 * @param {*} groups
 * @param {*} keys
 */

function getParams(groups, keys) {
  const obj = {};
  for (let i = 0; i < groups.length; i++) {
    const value = groups[i];
    const name = keys[i].name;
    obj[name] = value;
  }
  //   console.log(obj);
  return obj;
}


let match = matchPath("/news/:id/:page?","/news/dfawe/fawef");
console.log(match);