react-router-dom#RouteChildrenProps TypeScript Examples

The following examples show how to use react-router-dom#RouteChildrenProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DocsPage.tsx    From vanilla-extract with MIT License 4 votes vote down vote up 
DocsPage = ({ location }: RouteChildrenProps) => {
  const [menuOpen, setMenuOpen] = useState(false);
  const toggleMenu = () => setMenuOpen((open) => !open);
  const closeMenu = () => setMenuOpen(false);
  const normalisedPath = location.pathname.endsWith('/')
    ? location.pathname.slice(0, location.pathname.lastIndexOf('/'))
    : location.pathname;

  useEffect(() => {
    if (menuOpen) {
      document.body.classList.add(styles.bodyLock);

      return () => {
        document.body.classList.remove(styles.bodyLock);
      };
    }
  }, [menuOpen]);

  return (
    <>
      <Header />

      <MenuBackdrop open={menuOpen} onClick={closeMenu} />

      <PrimaryNav
        open={menuOpen}
        onClick={closeMenu}
        pathname={normalisedPath}
      />

      <SecondaryNav onClick={closeMenu} pathname={normalisedPath} />

      <Box zIndex={1} position="fixed" top={0} right={0} padding="large">
        <Box display={{ mobile: 'none', desktop: 'block' }}>
          <ColorModeToggle />
        </Box>
        <Box display={{ desktop: 'none' }}>
          <Fab open={menuOpen} onClick={toggleMenu} />
        </Box>
      </Box>

      <Box className={styles.container} zIndex={-1}>
        <Box
          component="main"
          paddingRight="large"
          paddingLeft={{ mobile: 'large', desktop: 'xxlarge' }}
          paddingTop={{ mobile: 'xxlarge', desktop: 'xlarge' }}
          className={styles.main}
        >
          <ContentBlock>
            <Box paddingBottom="xxxlarge">
              <MDXProvider components={mdxComponents}>
                {docs.map(({ route, Component, title, sections }, index) => {
                  const prevDoc = docs[index - 1];
                  const nextDoc = docs[index + 1];
                  const pageTitle = `${
                    title ? `${title} — ` : ''
                  }vanilla-extract`.trim();
                  const hashes = sections
                    .filter(({ level }) => level === 2 || level === 3)
                    .map(({ hash }) => hash);

                  return (
                    <Route
                      key={route}
                      path={route}
                      exact
                      render={() => (
                        <>
                          <Title>{pageTitle}</Title>
                          <Meta property="og:title" content={pageTitle} />
                          <Meta name="twitter:title" content={pageTitle} />
                          <DocsRoute
                            nextDoc={nextDoc}
                            prevDoc={prevDoc}
                            hashes={hashes}
                            component={Component}
                          />
                        </>
                      )}
                    />
                  );
                })}
              </MDXProvider>
            </Box>
          </ContentBlock>
        </Box>
      </Box>
    </>
  );
}