react-router3 - 利用 path-to-regexp 实现路径及参数的匹配

上节代码也看到了， 在判断的时候，是直接拿 props上传的 path 和 监听到的 pathname作的全等比较

那这样的话，如果手动传入 /about/1, /about/page/2 这样的路径就匹配不到了, 肯定会返回 null 的,

path-to-regexp仓库

path-to-regexp部分用法

// pathToRegexp(str, [], {})传3个参数， 要匹配的字符串目标，一个数组，最后是一个对象
const { pathToRegexp } = require("path-to-regexp");
// {end: false} 非严格匹配，只要有部分一样就可以通过， 如果是true，就是严格匹配
let regxp = pathToRegexp('/home', [], { end: false });
console.log(regxp);
console.log(regxp.test('/home')); // true
console.log(regxp.test('/home/2')); // true
console.log(regxp.test('/home/app/10')); // true

regulex-正则解析图形化

代码演示

修改 Route.js 里的路径判断

加入正则匹配库

import React, { PureComponent } from 'react';
import Context from './Context';
import { pathToRegexp } from 'path-to-regexp';
class Route extends PureComponent {
  static contextType = Context;
  render() {
    // 获取到用户传入的path 和 组件
    const { component: RouteComponent, path, exact = false } = this.props;
    // 获取到监听到的变化后的hash值
    const { pathname } = this.context.location;
    // 比较， 如果相等，就渲染对应的组件，否则，渲染null
    let regexp = pathToRegexp(path, [], { end: exact });
    return pathname.match(regexp) ? <RouteComponent /> : null;
  }
}

export default Route;