react-router#matchPath JavaScript Examples

matchUrlForRoutePath = (urlPath, routePath) => {
  let result = null;
  const routeConfig = ROUTE_CONFIGS[routePath];
  const rawMatchPathResult = matchPath(removeQueryStringFromUrl(urlPath), {
    path: routePath,
    routePath,
    ...routeConfig
  });

  if (rawMatchPathResult) {
    result = {
      ...rawMatchPathResult,
      ...routeConfig
    };
  }

  return result;
}

refreshTimer() {

    const isMatch = !!matchPath(
      this.props.locationName, 
      '/emrHealth'
    ); 
    if(this.props.signedIn && isMatch) {
      this.setState({
        refreshInterval : setInterval(() => this.checkTimer(), 1000, this.checkTimer())
      }, () => {    console.log('hi refreshed')})
    } else {
      this.setState({
        refreshInterval : clearInterval(this.state.refreshInterval)})
    }

  }

checkTimer() {
    let match = !!matchPath(
      this.props.locationName, 
      '/emrHealth'
    ); 
    if(match) {
      if(this.state.refreshTimer <= 0) {
        window.location.reload()      
      } else {
        this.setState({
          refreshTimer: this.state.refreshTimer - 1
        })
      }
    }

  }

function matchRoutes(routes, pathname,
/*not public API*/
branch) {
  if (branch === void 0) {
    branch = [];
  }

  routes.some(function (route) {
    var match = route.path ? matchPath(pathname, route) : branch.length ? branch[branch.length - 1].match // use parent match
    : Router.computeRootMatch(pathname); // use default "root" match

    if (match) {
      branch.push({
        route: route,
        match: match
      });

      if (route.routes) {
        matchRoutes(route.routes, pathname, branch);
      }
    }

    return match;
  });
  return branch;
}

function matchRoutes(routes, pathname, /*not public API*/ branch = []) {
  routes.some(route => {
    const match = route.path
      ? matchPath(pathname, route)
      : branch.length
        ? branch[branch.length - 1].match // use parent match
        : Router.computeRootMatch(pathname); // use default "root" match

    if (match) {
      branch.push({ route, match });

      if (route.routes) {
        matchRoutes(route.routes, pathname, branch);
      }
    }

    return match;
  });

  return branch;
}

NavLink = forwardRef$1(function (_ref, forwardedRef) {
  var _ref$ariaCurrent = _ref["aria-current"],
      ariaCurrent = _ref$ariaCurrent === void 0 ? "page" : _ref$ariaCurrent,
      _ref$activeClassName = _ref.activeClassName,
      activeClassName = _ref$activeClassName === void 0 ? "active" : _ref$activeClassName,
      activeStyle = _ref.activeStyle,
      classNameProp = _ref.className,
      exact = _ref.exact,
      isActiveProp = _ref.isActive,
      locationProp = _ref.location,
      sensitive = _ref.sensitive,
      strict = _ref.strict,
      styleProp = _ref.style,
      to = _ref.to,
      innerRef = _ref.innerRef,
      rest = _objectWithoutPropertiesLoose(_ref, ["aria-current", "activeClassName", "activeStyle", "className", "exact", "isActive", "location", "sensitive", "strict", "style", "to", "innerRef"]);

  return React.createElement(__RouterContext.Consumer, null, function (context) {
    !context ? process.env.NODE_ENV !== "production" ? invariant(false, "You should not use <NavLink> outside a <Router>") : invariant(false) : void 0;
    var currentLocation = locationProp || context.location;
    var toLocation = normalizeToLocation(resolveToLocation(to, currentLocation), currentLocation);
    var path = toLocation.pathname; // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202

    var escapedPath = path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
    var match = escapedPath ? matchPath(currentLocation.pathname, {
      path: escapedPath,
      exact: exact,
      sensitive: sensitive,
      strict: strict
    }) : null;
    var isActive = !!(isActiveProp ? isActiveProp(match, currentLocation) : match);
    var className = isActive ? joinClassnames(classNameProp, activeClassName) : classNameProp;
    var style = isActive ? _extends({}, styleProp, {}, activeStyle) : styleProp;

    var props = _extends({
      "aria-current": isActive && ariaCurrent || null,
      className: className,
      style: style,
      to: toLocation
    }, rest); // React 15 compat


    if (forwardRefShim$1 !== forwardRef$1) {
      props.ref = forwardedRef || innerRef;
    } else {
      props.innerRef = innerRef;
    }

    return React.createElement(Link, props);
  });
})

NavLink = forwardRef(
  (
    {
      "aria-current": ariaCurrent = "page",
      activeClassName = "active",
      activeStyle,
      className: classNameProp,
      exact,
      isActive: isActiveProp,
      location: locationProp,
      sensitive,
      strict,
      style: styleProp,
      to,
      innerRef, // TODO: deprecate
      ...rest
    },
    forwardedRef
  ) => {
    return (
      <RouterContext.Consumer>
        {context => {
          invariant(context, "You should not use <NavLink> outside a <Router>");

          const currentLocation = locationProp || context.location;
          const toLocation = normalizeToLocation(
            resolveToLocation(to, currentLocation),
            currentLocation
          );
          const { pathname: path } = toLocation;
          // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202
          const escapedPath =
            path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");

          const match = escapedPath
            ? matchPath(currentLocation.pathname, {
                path: escapedPath,
                exact,
                sensitive,
                strict
              })
            : null;
          const isActive = !!(isActiveProp
            ? isActiveProp(match, currentLocation)
            : match);

          const className = isActive
            ? joinClassnames(classNameProp, activeClassName)
            : classNameProp;
          const style = isActive ? { ...styleProp, ...activeStyle } : styleProp;

          const props = {
            "aria-current": (isActive && ariaCurrent) || null,
            className,
            style,
            to: toLocation,
            ...rest
          };

          // React 15 compat
          if (forwardRefShim !== forwardRef) {
            props.ref = forwardedRef || innerRef;
          } else {
            props.innerRef = innerRef;
          }

          return <Link {...props} />;
        }}
      </RouterContext.Consumer>
    );
  }
)

NavLink = forwardRef$1(function (_ref, forwardedRef) {
  var _ref$ariaCurrent = _ref["aria-current"],
      ariaCurrent = _ref$ariaCurrent === void 0 ? "page" : _ref$ariaCurrent,
      _ref$activeClassName = _ref.activeClassName,
      activeClassName = _ref$activeClassName === void 0 ? "active" : _ref$activeClassName,
      activeStyle = _ref.activeStyle,
      classNameProp = _ref.className,
      exact = _ref.exact,
      isActiveProp = _ref.isActive,
      locationProp = _ref.location,
      strict = _ref.strict,
      styleProp = _ref.style,
      to = _ref.to,
      innerRef = _ref.innerRef,
      rest = _objectWithoutPropertiesLoose(_ref, ["aria-current", "activeClassName", "activeStyle", "className", "exact", "isActive", "location", "strict", "style", "to", "innerRef"]);

  return React.createElement(__RouterContext.Consumer, null, function (context) {
    !context ? process.env.NODE_ENV !== "production" ? invariant(false, "You should not use <NavLink> outside a <Router>") : invariant(false) : void 0;
    var currentLocation = locationProp || context.location;
    var toLocation = normalizeToLocation(resolveToLocation(to, currentLocation), currentLocation);
    var path = toLocation.pathname; // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202

    var escapedPath = path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
    var match = escapedPath ? matchPath(currentLocation.pathname, {
      path: escapedPath,
      exact: exact,
      strict: strict
    }) : null;
    var isActive = !!(isActiveProp ? isActiveProp(match, currentLocation) : match);
    var className = isActive ? joinClassnames(classNameProp, activeClassName) : classNameProp;
    var style = isActive ? _extends({}, styleProp, {}, activeStyle) : styleProp;

    var props = _extends({
      "aria-current": isActive && ariaCurrent || null,
      className: className,
      style: style,
      to: toLocation
    }, rest); // React 15 compat


    if (forwardRefShim$1 !== forwardRef$1) {
      props.ref = forwardedRef || innerRef;
    } else {
      props.innerRef = innerRef;
    }

    return React.createElement(Link, props);
  });
})

NavLink = forwardRef(
  (
    {
      "aria-current": ariaCurrent = "page",
      activeClassName = "active",
      activeStyle,
      className: classNameProp,
      exact,
      isActive: isActiveProp,
      location: locationProp,
      strict,
      style: styleProp,
      to,
      innerRef, // TODO: deprecate
      ...rest
    },
    forwardedRef
  ) => {
    return (
      <RouterContext.Consumer>
        {context => {
          invariant(context, "You should not use <NavLink> outside a <Router>");

          const currentLocation = locationProp || context.location;
          const toLocation = normalizeToLocation(
            resolveToLocation(to, currentLocation),
            currentLocation
          );
          const { pathname: path } = toLocation;
          // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202
          const escapedPath =
            path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");

          const match = escapedPath
            ? matchPath(currentLocation.pathname, {
                path: escapedPath,
                exact,
                strict
              })
            : null;
          const isActive = !!(isActiveProp
            ? isActiveProp(match, currentLocation)
            : match);

          const className = isActive
            ? joinClassnames(classNameProp, activeClassName)
            : classNameProp;
          const style = isActive ? { ...styleProp, ...activeStyle } : styleProp;

          const props = {
            "aria-current": (isActive && ariaCurrent) || null,
            className,
            style,
            to: toLocation,
            ...rest
          };

          // React 15 compat
          if (forwardRefShim !== forwardRef) {
            props.ref = forwardedRef || innerRef;
          } else {
            props.innerRef = innerRef;
          }

          return <Link {...props} />;
        }}
      </RouterContext.Consumer>
    );
  }
)

function NavigationBar({ intl }) {
  const { courseId } = useParams();
  const learnersTabEnabled = useSelector(selectLearnersTabEnabled);

  const navLinks = [
    {
      route: Routes.POSTS.MY_POSTS,
      labelMessage: messages.myPosts,
    },
    {
      route: Routes.POSTS.ALL_POSTS,
      labelMessage: messages.allPosts,
    },
    {
      route: Routes.TOPICS.ALL,
      isActive: (match, location) => Boolean(matchPath(location.pathname, { path: Routes.TOPICS.PATH })),
      labelMessage: messages.allTopics,
    },
  ];
  if (learnersTabEnabled) {
    navLinks.push({
      route: Routes.LEARNERS.PATH,
      labelMessage: messages.learners,
    });
  }

  return (
    <Nav variant="pills" className="py-2">
      {navLinks.map(link => (
        <Nav.Item key={link.route}>
          <Nav.Link
            as={NavLink}
            to={discussionsPath(link.route, { courseId })}
            className="border"
            isActive={link.isActive}
          >
            {intl.formatMessage(link.labelMessage)}
          </Nav.Link>
        </Nav.Item>
      ))}
    </Nav>
  );
}

createSelectors = function createSelectors(structure) {
  var getIn = structure.getIn,
      toJS = structure.toJS;

  var isRouter = function isRouter(value) {
    return value != null && _typeof(value) === 'object' && getIn(value, ['location']) && getIn(value, ['action']);
  };

  var getRouter = function getRouter(state) {
    var router = toJS(getIn(state, ['router']));

    if (!isRouter(router)) {
      throw 'Could not find router reducer in state tree, it must be mounted under "router"';
    }

    return router;
  };

  var getLocation = function getLocation(state) {
    return toJS(getIn(getRouter(state), ['location']));
  };

  var getAction = function getAction(state) {
    return toJS(getIn(getRouter(state), ['action']));
  };

  var getSearch = function getSearch(state) {
    return toJS(getIn(getRouter(state), ['location', 'search']));
  };

  var getHash = function getHash(state) {
    return toJS(getIn(getRouter(state), ['location', 'hash']));
  }; // It only makes sense to recalculate the `matchPath` whenever the pathname
  // of the location changes. That's why `createMatchSelector` memoizes
  // the latest result based on the location's pathname.


  var createMatchSelector = function createMatchSelector(path) {
    var lastPathname = null;
    var lastMatch = null;
    return function (state) {
      var _ref = getLocation(state) || {},
          pathname = _ref.pathname;

      if (pathname === lastPathname) {
        return lastMatch;
      }

      lastPathname = pathname;
      var match = matchPath(pathname, path);

      if (!match || !lastMatch || match.url !== lastMatch.url) {
        lastMatch = match;
      }

      return lastMatch;
    };
  };

  return {
    getLocation: getLocation,
    getAction: getAction,
    getRouter: getRouter,
    getSearch: getSearch,
    getHash: getHash,
    createMatchSelector: createMatchSelector
  };
}

AddressDetail = () => {
  const dispatch = useDispatch()
  const history = useHistory()
  const location = useLocation()
  const [label, setLabel] = useState()
  const [contact, setContact] = useState()
  const { isMobile } = useWindowDimensions()
  const knownAddresses = useSelector(
    (state) => state.global.knownAddresses || {},
  )

  const deleteKnownAddress = () => {
    dispatch(globalActions.deleteKnownAddress(contact.address))
    message.error('Address deleted')
    setTimeout(() => {
      history.goBack()
    }, 500)
  }

  const editKnownAddress = () => {
    dispatch(
      globalActions.setKnownAddress({
        ...contact,
        label: label,
      }),
    )
    message.success(`Address label updated to ${label}`)
    history.goBack()
  }

  useEffect(() => {
    const m = matchPath(location.pathname, { path: Paths.address })
    const { address } = m?.params || {}
    if (!knownAddresses[address]) {
      message.error('Address not found in local state')
      setTimeout(() => {
        history.goBack()
      }, 500)
    }
    const tempAddress = knownAddresses[address]
    setContact(tempAddress)
    setLabel(tempAddress.label)
  }, [location])

  return (
    <AnimatedSection>
      <Space direction='vertical' size='large' style={{ width: '100%' }}>
        <Space align='baseline' size='large'>
          <Label ultraWide>
            <Hint>Label</Hint>
          </Label>
          <InputBox
            margin='auto'
            width={200}
            value={label}
            onChange={({ target: { value } }) => setLabel(value)}
          />
        </Space>
        <Space align='baseline' size='large'>
          <Label ultraWide>
            <Hint>Address</Hint>
          </Label>
          <WalletAddress showLabel address={contact?.address} shorten />
        </Space>
        <Space align='baseline' size='large'>
          <Label ultraWide>
            <Hint>Domain</Hint>
          </Label>
          <Text>{contact?.domain?.name || 'None'}</Text>
        </Space>
        <Row style={{ marginTop: 24 }} justify='space-between'>
          <Popconfirm
            title='Are you sure？'
            onConfirm={deleteKnownAddress}
          >
            <Button
              type='primary'
              shape='round'
              danger
              size='large'
              icon={<DeleteOutlined />}
            >
              Delete
            </Button>
          </Popconfirm>
          <Button
            type='primary'
            shape='round'
            size='large'
            icon={<EditOutlined />}
            onClick={editKnownAddress}
          >
            Save
          </Button>
        </Row>
      </Space>
    </AnimatedSection>
  )
}

Show = () => {
  const history = useHistory()
  const location = useLocation()
  const dispatch = useDispatch()

  const wallets = useSelector(state => state.wallet)
  const match = useRouteMatch(Paths.show)
  const { address: routeAddress, action } = match ? match.params : {}
  const oneAddress = util.safeOneAddress(routeAddress)
  const address = util.safeNormalizedAddress(routeAddress)
  const selectedAddress = useSelector(state => state.global.selectedWallet)
  const wallet = wallets[address] || {}
  const [section, setSection] = useState(action)
  const [command, setCommand] = useState(action)
  const network = useSelector(state => state.global.network)
  const [activeTab, setActiveTab] = useState('coins')
  const { expert } = wallet
  const dev = useSelector(state => state.global.dev)

  useEffect(() => {
    if (!wallet.address) {
      return history.push(Paths.wallets)
    }
    if (address && (address !== selectedAddress)) {
      dispatch(globalActions.selectWallet(address))
    }
    const fetch = () => dispatch(balanceActions.fetchBalance({ address }))
    const handler = setInterval(() => {
      if (!document.hidden) { fetch() }
    }, WalletConstants.fetchBalanceFrequency)
    batch(() => {
      fetch()
      dispatch(walletActions.fetchWallet({ address }))
    })
    return () => { clearInterval(handler) }
  }, [address])

  const selectedToken = wallet?.selectedToken || HarmonyONE

  useEffect(() => {
    const m = matchPath(location.pathname, { path: Paths.show })
    const { action } = m ? m.params : {}
    if (action !== 'nft' && action !== 'transfer' && selectedToken.key !== 'one' && selectedToken.tokenType !== ONEConstants.TokenType.ERC20) {
      dispatch(walletActions.setSelectedToken({ token: null, address }))
    }
    if (SpecialCommands.includes(action)) {
      setCommand(action)
    } else {
      setCommand('')
    }
    if (tabList.find(t => t.key === action)) {
      setSection(undefined)
      setActiveTab(action)
      return
    } else if (SectionList.includes(action)) {
      setSection(action)
      return
    }
    setSection('')
  }, [location])

  const showTab = (tab) => { history.push(Paths.showAddress(oneAddress, tab)) }
  const showStartScreen = () => { history.push(Paths.showAddress(oneAddress)) }

  // UI Rendering below
  if (!wallet.address || wallet.network !== network) {
    return <Redirect to={Paths.wallets} />
  }

  const displayTabList = tabList.filter(e => e.tab && ((!e.expert || expert) || (!e.dev || dev)) && (!e.requireNetwork || e.requireNetwork(network)))

  return (
    <>
      {!section &&
        <AnimatedSection
          title={<WalletTitle address={address} onQrCodeClick={() => showTab('qr')} onScanClick={() => showTab('scan')} />}
          tabList={displayTabList}
          activeTabKey={activeTab}
          onTabChange={key => showTab(key)}
          wide
        >
          <Warnings address={address} />
          {activeTab === 'about' && <About address={address} />}
          {activeTab === 'coins' && <Balance address={address} />}
          {activeTab === 'coins' && <ERC20Grid address={address} />}
          {activeTab === 'nft' && <NFTDashboard address={address} />}
          {activeTab === 'help' && <Recovery address={address} />}
          {activeTab === 'swap' && <Swap address={address} />}
          {activeTab === 'gift' && <Gift address={address} />}
          {activeTab === 'qr' && <QRCode address={address} name={wallet.name} />}
          {activeTab === 'scan' && <Scan address={address} />}
          {activeTab === 'call' && <Call address={address} headless />}
          {activeTab === 'sign' && <Sign address={address} headless />}
          {activeTab === 'history' && <TransactionViewer address={address} />}
          <Upgrade address={address} prompt={command === 'upgrade'} onClose={showStartScreen} />
          <CheckForwardState address={address} onClose={() => history.push(Paths.wallets)} />
          <CheckRoots address={address} onClose={() => history.push(Paths.wallets)} />
        </AnimatedSection>}

      {section === 'transfer' && <Send address={address} onClose={showStartScreen} />}
      {section === 'limit' && <Limit address={address} onClose={showStartScreen} />}
      {section === 'recover' && <DoRecover address={address} onClose={showStartScreen} />}
      {section === 'setRecoveryAddress' && <SetRecovery address={address} onClose={showStartScreen} />}
      {section === 'domain' && <PurchaseDomain address={address} onClose={showStartScreen} />}
      {section === 'domainTransfer' && <TransferDomain address={address} onClose={showStartScreen} />}
      {section === 'reclaim' && <Reclaim address={address} onClose={showStartScreen} />}
      {section === 'extend' && <Extend address={address} onClose={showStartScreen} />}
      {section === 'stake' && <Stake address={address} onClose={showStartScreen} />}
      {section === 'unstake' && <Unstake address={address} />}
      {section === 'collectStakeReward' && <CollectStakeReward address={address} />}
    </>
  )
}

Tools = () => {
  const dev = useSelector(state => state.global.dev)
  const wallets = useSelector(state => state.wallet)
  const [section, setSection] = useState(Sections.Home)

  const history = useHistory()
  const location = useLocation()

  useEffect(() => {
    const m = matchPath(location.pathname, { path: Paths.toolLink })
    const { tool } = m ? m.params : {}

    if (ToolMap[tool] === true) {
      setSection(tool)
      return
    }
    setSection(Sections.Home)
  }, [location])

  useEffect(() => {
    if (section === Sections.MetamaskAdd) {
      addHarmonyNetwork()
    }
  }, [section])

  const openTool = (tool) => { history.push(Paths.toolOpen(tool)) }

  const dumpState = () => {
    const url = window.URL.createObjectURL(new Blob([JSON.stringify(wallets)], { type: 'application/json' }))
    const a = document.createElement('a')
    a.style.display = 'none'
    a.href = url
    // the filename you want
    a.download = '1wallet-state-dump.json'
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
  }

  return (
    <>
      {section === Sections.Home &&
        <AnimatedSection wide>
          <Space direction='vertical' style={{ width: '100%' }}>
            <Title level={3}>MetaMask</Title>
            <Button type='primary' shape='round' onClick={() => openTool(Sections.MetamaskAdd)}>Switch to Harmony Network</Button>
            <Divider />
            <Title level={3}>Harmony Safe</Title>
            <Space wrap>
              <Button type='primary' shape='round' href='http://multisig.harmony.one' target='_blank'>Open Harmony MultiSig</Button>
              <Button type='primary' shape='round' onClick={() => openTool(Sections.SushiEncoder)}>SushiSwap Transaction Encoder</Button>
            </Space>
            {dev &&
              <>
                <Divider />
                <Title level={3}>Developer Tools</Title>
                <Button type='primary' shape='round' onClick={dumpState}>Dump Wallet States</Button>
              </>}
          </Space>
        </AnimatedSection>}
      {section === Sections.SushiEncoder &&
        <AnimatedSection title='Harmony Safe | SushiSwap Encoder' wide>
          <SushiSwapEncoder onClose={() => openTool()} />
        </AnimatedSection>}
      {section === Sections.MetamaskAdd &&
        <AnimatedSection title='Switch to Harmony Network' wide>
          <Space direction='vertical' style={{ width: '100%' }}>
            <Text>This tool helps you quickly setup MetaMask for Harmony. Follow the instructions on MetaMask extension to complete the setup</Text>
            <Divider />
            <Text>You should see something like this. Verify the information and click "Approve" to proceed.</Text>
            <Row justify='center'><Image src={MetaMaskAdd} style={{ objectFit: 'contain', maxHeight: 600 }} /></Row>
            <Divider />
            <Text>If you already had Harmony on MetaMask, it will help you switch to Harmony network instead.</Text>
            <Row justify='center'><Image src={MetaMaskSwitch} style={{ objectFit: 'contain', maxHeight: 600 }} /></Row>
            <TallRow justify='space-between'>
              <Button type='text' danger onClick={() => openTool()}>Cancel</Button>
              <Button type='primary' shape='round' onClick={addHarmonyNetwork}>Retry</Button>
            </TallRow>
          </Space>
        </AnimatedSection>}
    </>
  )
}

render() {
    if (!cookie.get(TOKEN) && !cookie.get(REFRESH_TOKEN)) {
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get('code');
      const error = urlParams.get('error');
      if (code) {
        this.getToken(code);
      } else if (!error) {
        requestLogin();
      } else {
        const error_description = urlParams.get('error_description');
        error_description && message.error(error_description || '');
      }
      return null;
    }

    const { appConfig = {} } = this.context;
    const routes = RoutesUtil.getRoutes(appConfig);

    const currentPath = this.props.location.pathname;
    const noMatchingRoutes = !routes.find(r =>
      matchPath(currentPath, {
        path: r.path,
        exact: true,
      })
    );

    return (
      <>
        <NProgress isAnimating={this.state.isLoading}>
          {({ isFinished, progress, animationDuration }) => (
            <Container
              isFinished={isFinished}
              animationDuration={animationDuration}
            >
              <Bar progress={progress} animationDuration={animationDuration} />
            </Container>
          )}
        </NProgress>
        <Switch>
          <Route
            exact
            path="/silent-refresh.html"
            onEnter={RoutesUtil.reload}
          />
          <Route
            path="/callback"
            render={() => <CallbackPage userManager={{}} />}
          />
          {!noMatchingRoutes &&
            routes.map(({ path, Component }) => (
              <Route key={path} exact path={path}>
                {({ match }) => (
                  <CSSTransition
                    in={match !== null}
                    timeout={300}
                    classNames="fade"
                    unmountOnExit
                    onEnter={() => {
                      this.setState({
                        isLoading: true,
                      });
                    }}
                    onEntered={() => {
                      this.setState({
                        isLoading: false,
                      });
                    }}
                  >
                    {match === null ? (
                      <></>
                    ) : (
                      <ErrorBoundary context={match.url}>
                        <Component
                          match={match}
                          location={this.props.location}
                        />
                      </ErrorBoundary>
                    )}
                  </CSSTransition>
                )}
              </Route>
            ))}
          {noMatchingRoutes && <NotFound />}
        </Switch>
      </>
    );
  }