10 examples of 'react router matchpath' in JavaScript

66
async matchRoute(pathname: string) {
67
    debug("Matching location %o", pathname);
68
    let route = null;
69
    for (let i = 0; i < this.routes.length; i++) {
70
        route = _.cloneDeep(this.routes[i]);
71
        const match = matchPath(pathname, { path: route.path, exact: route.exact });
72
        if (!match) {
73
            continue;
74
        }
75
76
        match.query = qs.parse(this.history.location.search);
77
78
        this.route = route;
79
        this.match = match;
80
81
        const params = { route, output: null, match };
82
        await this.middleware(params);
83
84
        return params.output;
85
    }
86
87
    return route;
88
}

9
export function pathToRoute(path) {
10
  return path.match(/([a-z-]+)/g);
11
}

13
match(pattern, path) {
14
  if (typeof pattern == "string") {
15
    if (pattern == path) return []
16
  } else if (pattern instanceof RegExp) {
17
    let match = pattern.exec(path)
18
    return match && match.slice(1)
19
  } else {
20
    let parts = path.slice(1).split("/")
21
    if (parts.length && !parts[parts.length - 1]) parts.pop()
22
    if (parts.length != pattern.length) return null
23
    let result = []
24
    for (let i = 0; i < parts.length; i++) {
25
      let pat = pattern[i]
26
      if (pat) {
27
        if (pat != parts[i]) return null
28
      } else {
29
        result.push(parts[i])
30
      }
31
    }
32
    return result
33
  }
34
}

77
export function matchPath(stack: string[], routes: RouterEntries) {
78
  const path: string[] = [];
79
  for (const id of stack) {
80
    const route = routes.find(r => r.id === id);
81
    if (route) {
82
      path.push(...route.path);
83
      routes = route.subroutes;
84
    } else {
85
      break;
86
    }
87
  }
88
  return {
89
    path: path,
90
    routes: routes,
91
  };
92
}

10
function matchRoutes(routes, pathname, /*not public API*/ branch = []) {
11
    routes.some(route => {
12
        const match = route.path
13
            ? matchPath(pathname, route)
14
            : branch.length
15
                ? branch[branch.length - 1].match // use parent match
16
                : {}; // use default "root" match
17
18
        // todo: Router.computeRootMatch(pathname);
19
        // todo: react-router v3 not support
20
21
        if (match) {
22
            branch.push({ route, match });
23
24
            if (route.routes) {
25
                matchRoutes(route.routes, pathname, branch);
26
            }
27
        }
28
29
        return match;
30
    });
31
32
    return branch;
33
}

175
currentRoute () {
176
  const routeData = Matcher.matchPath(this.routes, this.currentPath())
177
  if (routeData) {
178
    return routeData
179
  } else {
180
    return null
181
  }
182
}

7
export function Router({ children }) {
8
	let [pathname] = useHistory();
9
	let nextChild;
10
	let nextParams;
11
12
	children = useMemo(() => toList(children), [children]);
13
14
	let length = children.length;
15
16
	for (let i = 0; i < length; i++) {
17
		let child = children[i];
18
		let props = child.props;
19
		if (props.path) {
20
			let [inRoute, params] = match(child.props.path, pathname);
21
			if (inRoute) {
22
				nextChild = child;
23
				nextParams = params;
24
				break;
25
			}
26
		}
27
		if (child.props.default) {
28
			nextChild = child;
29
		}
30
	}
31
32
	if (nextChild) {
33
		let { type, props } = nextChild;
34
		let nextProps = { ...props, params: nextParams };
35
		delete nextProps.path;
36
		delete nextProps.default;
37
		return createElement(type, nextProps);
38
	}
39
}

28
matchRoute(_this, url) {
29
    url = this.sanitizeUrl(url);
30
    let matchedRoute = null;
31
    _.each(_this.routes, route => {
32
        if (route.match(url) && !matchedRoute) {
33
            matchedRoute = route;
34
            // console.log('%c[Router]: ' + url, 'color: #139C09; font-weight: bold');
35
        }
36
    });
37
38
    return matchedRoute;
39
}

17
function matchRoute(route) {
18
	const currentPath = window.location.pathname;
19
20
	if (route.exact) {
21
		return currentPath === route.path;
22
	}
23
24
	return currentPath.match(/[^\/]+/g)[0] === route.path.match(/[^\/]+/g)[0];
25
}

19
get match() {
20
  return this.routeMatch;
21
}