How to use the react-router.matchPath function in react-router

To help you get started, we’ve selected a few react-router examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github winoteam / react-router-navigation / modules / shouldStackUpdate.js View on Github external
export default function (
  currentCard: Card,
  nextCard: Card,
  currentRouterHistory: RouterHistory,
  nextRouterHistory: RouterHistory,
): boolean {
  const { location: currentLocation } = currentRouterHistory
  const { entries, index, location: nextLocation } = nextRouterHistory
  if (entries === undefined || index === undefined) return false
  // Get entries and matchers
  const previousEntry = entries[index - 1]
  const currentEntry = entries[index]
  const nextEntry = entries[index + 1]
  const matchCurrentRoute = matchPath(nextLocation.pathname, currentCard.path, currentCard)
  const matchNextRoute = matchPath(nextLocation.pathname, nextCard.path, nextCard)
  return (
    // Test if pathame are different
    (currentLocation.pathname !== nextLocation.pathname) &&
    // case 1) basic pathname
    ((currentCard.path !== nextCard.path) ||
    // case 2) Pathname with query params
    // ex: with same path article/:id,
    //     pathname article/2 !== article/3
    (matchCurrentRoute !== null && matchNextRoute !== null &&
     Object.keys(matchCurrentRoute.params).length !== 0 &&
     Object.keys(matchNextRoute.params).length !== 0 &&
     ((previousEntry && currentEntry.pathname !== previousEntry.pathname) ||
      (nextEntry && currentEntry.pathname !== nextEntry.pathname))
    ))
  )
github knacksteem / knacksteem.org / src / containers / ContributionMetaBar / index.js View on Github external
loadRemoteUserData() {
    const {dispatch} = this.props;
    const match = matchPath(this.props.location.pathname, {
      path: '/@:username',
    });
    if(match && match.params.username) {
      dispatch(getRemoteUserData(match.params.username));
    } else {
      dispatch(getRemoteUserData(Cookies.get('username')));
    }
  }
github fabric8-ui / fabric8-ui / packages / toolchain / src / app / redux / context / reducer.ts View on Github external
function getContext(pathname: string): ContextState {
  let matchResult = matchPath(pathname, {
    path: `/:username([^_][^/]+)/:spacename([^_][^/]+|${NO_SPACE_PATH})/:subPath(.*)?`,
    exact: false,
    strict: false,
  });

  if (!matchResult) {
    matchResult = matchPath(pathname, {
      path: '/:username([^_][^/]+)/:subPath(.*)?',
      exact: false,
      strict: false,
    });
  }

  const username = matchResult ? matchResult.params.username : undefined;
  const spacename =
    matchResult && matchResult.params.spacename !== NO_SPACE_PATH
      ? matchResult.params.spacename
      : undefined;
  const subPath = matchResult
    ? matchResult.params.subPath
      ? `/${matchResult.params.subPath}`
      : undefined
    : pathname;
github wooline / react-coat-ssr-demo / src / common / routers.ts View on Github external
Object.keys(pathToView).forEach(url => {
    const match = matchPath(pathname, url);
    if (match) {
      const [moduleName, viewName] = pathToView[url];
      if (!views[moduleName]) {
        views[moduleName] = {[viewName]: 1};
      } else {
        views[moduleName][viewName] = 1;
      }
      if (match.params) {
        pathData[moduleName] = match.params;
      }
    }
  });
  return {views, pathData};
github mingzuozhibi / mzzb-ui / src / common / reducers / current.ts View on Github external
function match(pathname: string, path: string) {
  return matchPath(pathname, {path, exact: true})
}
github reactioncommerce / reaction / imports / plugins / core / router / client / browserRouter.js View on Github external
      foundPaths = Router.routes.filter((pathObject) => matchPath("/not-found", {
        path: pathObject.route,
        exact: true
      }));
    }
github dunwu / frontend-tutorial / codes / antd-admin / src / components / Sidebar / Sidebar.jsx View on Github external
const isActive = (path, history) => {
  return matchPath(path, {
    path: history.location.pathname,
    exact: true,
    strict: false
  })
};
github jcoreio / react-router-drilldown / src / index.js View on Github external
React.Children.forEach(children, (element: any) => {
        if (!React.isValidElement(element)) return

        const { path: pathProp, exact, strict, sensitive, from } = element.props
        const path = pathProp || from

        if (match == null) {
          child =
            element.key != null ? element : React.cloneElement(element, { key })
          match = path
            ? matchPath(location.pathname, { path, exact, strict, sensitive })
            : _match
        }
        key++
      })
github icd2k3 / react-router-breadcrumbs-hoc / src / index.js View on Github external
  const getIsPathExcluded = (path) => matchPath(pathSection, { path, exact: true, strict: false });
  if (excludePaths && excludePaths.some(getIsPathExcluded)) {
github ReactTraining / react-router / packages / react-router-redux / modules / selectors.js View on Github external
return state => {
    const { pathname } = getLocation(state) || {};
    if (pathname === lastPathname) {
      return lastMatch;
    }
    lastPathname = pathname;
    const match = matchPath(pathname, path);
    if (!match || !lastMatch || match.url !== lastMatch.url) {
      lastMatch = match;
    }
    return lastMatch;
  };
};