react-router-dom#Routes TypeScript Examples

The following examples show how to use react-router-dom#Routes. 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: util.test.tsx    From backstage with Apache License 2.0 7 votes vote down vote up 
describe('util', () => {
  describe('useNavigateToQuery', () => {
    it('navigates to query', async () => {
      const MyComponent = () => {
        const navigateToQuery = useNavigateToQuery();
        navigateToQuery({ query: 'test' });
        return <div>test</div>;
      };

      await act(async () => {
        await render(
          wrapInTestApp(
            <Routes>
              <Route element={<MyComponent />} />
            </Routes>,
            {
              mountedRoutes: {
                '/search': rootRouteRef,
              },
            },
          ),
        );

        expect(navigate).toHaveBeenCalledTimes(1);
        expect(navigate).toHaveBeenCalledWith('/search?query=test');
      });
    });
  });
});
Example #2
Source File: App.tsx    From livekit-react with Apache License 2.0 6 votes vote down vote up 
App = () => {
  return (
    <div className="container">
      <Router>
        <Routes>
          <Route path="/room" element={<RoomPage />} />
          <Route path="/" element={<PreJoinPage />} />
        </Routes>
      </Router>
    </div>
  );
}
Example #3
Source File: router.component.tsx    From master-frontend-lemoncode with MIT License 6 votes vote down vote up 
RouterComponent: React.FunctionComponent = () => {
  return (
    <HashRouter>
      <Routes>
        <Route path={switchRoutes.root} element={<ListScene />} />
        <Route path={switchRoutes.list} element={<ListScene />} />
      </Routes>
    </HashRouter>
  );
}
Example #4
Source File: AppRoutes.tsx    From react-starter-boilerplate with MIT License 6 votes vote down vote up 
AppRoutes = () => (
  <Routes>
    <Route path={AppRoute.home} element={<Layout />}>
      <Route path={AppRoute.home} element={<Home />} />
      <Route path={AppRoute.about} element={<About />} />
      <Route path={AppRoute.help} element={<Help />} />
      <Route path="*" element={<Home />} />
    </Route>
  </Routes>
)
Example #5
Source File: App.tsx    From Search-Next with GNU General Public License v3.0 6 votes vote down vote up 
function App(props: any) {
  return (
    <div className="App">
      <Suspense fallback={<GlobalLoading />}>
        <SnackbarProvider
          maxSnack={1}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'center',
          }}
        >
          <HashRouter>
            <Routes>{Recursive(routers)}</Routes>
          </HashRouter>
        </SnackbarProvider>
      </Suspense>
      <ToastContainer />
    </div>
  );
}
Example #6
Source File: App.tsx    From auth0-react with MIT License 6 votes vote down vote up 
function App() {
  const { isLoading, error } = useAuth0();

  if (isLoading) {
    return <Loading />;
  }

  return (
    <>
      <Nav />
      {error && <Error message={error.message} />}
      <Routes>
        <Route path="/" />
        <Route path="/users" element={<ProtectedRoute component={Users} />} />
      </Routes>
    </>
  );
}
Example #7
Source File: Toolpad.tsx    From mui-toolpad with MIT License 6 votes vote down vote up 
export default function Toolpad({ basename }: EditorProps) {
  return (
    <NoSsr>
      <React.Suspense fallback="loading...">
        <BrowserRouter basename={basename}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/app/:appId/*" element={<AppWorkspace />} />
          </Routes>
        </BrowserRouter>
      </React.Suspense>
    </NoSsr>
  );
}
Example #8
Source File: App.tsx    From react-amap with MIT License 6 votes vote down vote up 
export default function App() {
  return (
    <HashRouter>
      <div className={styles.warpper}>
        <GitHubCorners fixed zIndex={99} size={60} target="__blank" href="https://github.com/uiwjs/react-amap" />
        <SideMenu />
        <div className={styles.content}>
          <Routes>
            {routes.map(({ component: Child, path }, idx) => {
              // @ts-ignore
              const Com = Child as any;
              return (
                <Route
                  key={idx}
                  path={path}
                  element={
                    <Suspense fallback={Loading}>
                      <Com />
                    </Suspense>
                  }
                />
              );
            })}
          </Routes>
        </div>
      </div>
    </HashRouter>
  );
}
Example #9
Source File: index.tsx    From npm-unpkg with MIT License 6 votes vote down vote up 
function App() {
  return (
    <HashRouter>
      <Routes>
        {routes.map(({ element: Child, path }, idx) => {
          const Com = Child as any;
          return (
            <Route
              key={idx}
              path={path}
              element={
                <Suspense fallback={Loading}>
                  <Com />
                </Suspense>
              }
            />
          );
        })}
      </Routes>
    </HashRouter>
  );
}
Example #10
Source File: useRouteRefParams.test.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
describe('useRouteRefParams', () => {
  it('should provide types params', () => {
    const routeRef = createRouteRef({
      id: 'ref1',
      params: ['a', 'b'],
    });

    const Page = () => {
      const params: { a: string; b: string } = useRouteRefParams(routeRef);

      return (
        <div>
          <span>{params.a}</span>
          <span>{params.b}</span>
        </div>
      );
    };

    const { getByText } = render(
      <MemoryRouter initialEntries={['/foo/bar']}>
        <Routes>
          <Route path="/:a/:b">
            <Page />
          </Route>
        </Routes>
      </MemoryRouter>,
    );

    expect(getByText('foo')).toBeInTheDocument();
    expect(getByText('bar')).toBeInTheDocument();
  });
});
Example #11
Source File: routes.tsx    From nlw-ecoleta with MIT License 6 votes vote down vote up 
export function Router() {
	return (
		<BrowserRouter>
			<Routes>
				<Route element={<Home />} path ="/" />
				<Route element={<CreatePoint />} path ="/create-point" />
			</Routes>
		</BrowserRouter>
	);
}
Example #12
Source File: test.moun.helper.tsx    From frontend with Apache License 2.0 6 votes vote down vote up 
mountVrtComponent = ({
  component,
  memoryRouterProps = {
    initialEntries: ["/"],
  },
  path = "/",
}: {
  component: React.ReactElement;
  memoryRouterProps?: MemoryRouterProps;
  path?: string;
}) =>
  mount(
    <MemoryRouter {...memoryRouterProps}>
      <Routes>
        <Route
          path={path}
          element={
            <SnackbarProvider>
              <UserProvider>
                <ProjectProvider>
                  <BuildProvider>
                    <HelpProvider>
                      <TestRunProvider>{component}</TestRunProvider>
                    </HelpProvider>
                  </BuildProvider>
                </ProjectProvider>
              </UserProvider>
            </SnackbarProvider>
          }
        />
      </Routes>
    </MemoryRouter>,
    {
      cssFiles: ["src/index.css"],
    }
  )
Example #13
Source File: Router.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
EmbeddedRouter = (_props: Props) => {
  const { entity } = useEntity();

  if (!isLighthouseAvailable(entity)) {
    return (
      <MissingAnnotationEmptyState
        annotation={LIGHTHOUSE_WEBSITE_URL_ANNOTATION}
      />
    );
  }

  return (
    <Routes>
      <Route path="/" element={<AuditListForEntity />} />
      <Route path="/audit/:id" element={<AuditViewContent />} />
      <Route path="/create-audit" element={<CreateAuditContent />} />
    </Routes>
  );
}
Example #14
Source File: App.tsx    From cockroachdb-typescript with Apache License 2.0 6 votes vote down vote up 
function App() {
  return (
    <Router>
      <nav className="navbar navbar-expand-lg navbar-dark navbar-custom">
        <div className="container-fluid">
          <a className="navbar-brand" aria-label="home page" href="/">CockroachDB + TypeScript</a>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Link className="nav-link" to="/">Leaderboard</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/admin">Admin</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div className="container page-content">
        <Routes>
          <Route path="/admin" element={<Admin />} />
          <Route path="/" element={<Leaderboard />} />
        </Routes>
      </div>
    </Router>
  );
}
Example #15
Source File: App.tsx    From cli with Apache License 2.0 6 votes vote down vote up 
export default function App() {
  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={
            <Navigate to={isEnvValid() === true ? '/home' : '/error'} replace />
          }
        />
        <Route path="/home" element={<Home />} />
        <Route path="/error" element={<Error />} />
      </Routes>
    </Router>
  );
}
Example #16
Source File: Pages.tsx    From react-pwa with MIT License 6 votes vote down vote up 
function Pages() {
  return (
    <Box sx={{ height: (theme) => getPageHeight(theme) }}>
      <Routes>
        {Object.values(routes).map(({ path, component: Component }) => {
          return <Route key={path} path={path} element={<Component />} />;
        })}
      </Routes>
    </Box>
  );
}
Example #17
Source File: index.tsx    From react-gtm-hook with MIT License 6 votes vote down vote up 
App = (): JSX.Element => {
  return (
    <Router>
      <GTMProvider state={gtmParams}>
        <div>
          <Routes>
            <Route path="/push_on_mount" element={<RoutePushOnMount/>}/>
            <Route path="/test" element={<TestRoute/>}/>
            <Route path="/" element={<Homepage/>}/>
          </Routes>
        </div>
      </GTMProvider>
    </Router>
  )
}
Example #18
Source File: routes.tsx    From bee-dashboard with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
BaseRouter = (): ReactElement => (
  <Routes>
    <Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
    <Route path={ROUTES.UPLOAD} element={<UploadLander />} />
    <Route path={ROUTES.DOWNLOAD} element={<Download />} />
    <Route path={ROUTES.HASH} element={<Share />} />
    <Route path={ROUTES.ACCOUNTING} element={<Accounting />} />
    <Route path={ROUTES.SETTINGS} element={<Settings />} />
    <Route path={ROUTES.STAMPS} element={<Stamps />} />
    <Route path={ROUTES.STAMPS_NEW} element={<CreatePostageStampPage />} />
    <Route path={ROUTES.STATUS} element={<Status />} />
    <Route path={ROUTES.FEEDS} element={<Feeds />} />
    <Route path={ROUTES.FEEDS_NEW} element={<CreateNewFeed />} />
    <Route path={ROUTES.FEEDS_UPDATE} element={<UpdateFeed />} />
    <Route path={ROUTES.FEEDS_PAGE} element={<FeedSubpage />} />
    <Route path={ROUTES.INFO} element={<Info />} />
    <Route path={ROUTES.WALLET} element={<Wallet />} />
    <Route path={ROUTES.CONFIRMATION} element={<Confirmation />} />
    <Route path={ROUTES.GIFT_CODES} element={<GiftCards />} />
    <Route path={ROUTES.TOP_UP_CRYPTO} element={<CryptoTopUpIndex />} />
    <Route path={ROUTES.TOP_UP_CRYPTO_SWAP} element={<Swap header="Top-up with cryptocurrencies" />} />
    <Route path={ROUTES.TOP_UP_BANK_CARD} element={<BankCardTopUpIndex />} />
    <Route path={ROUTES.TOP_UP_BANK_CARD_SWAP} element={<Swap header="Top-up with bank card" />} />
    <Route path={ROUTES.TOP_UP_GIFT_CODE} element={<GiftCardTopUpIndex />} />
    <Route path={ROUTES.TOP_UP_GIFT_CODE_FUND} element={<GiftCardFund />} />
    <Route path={ROUTES.RESTART} element={<Restart />} />
    <Route path={ROUTES.RESTART_LIGHT} element={<LightModeRestart />} />
  </Routes>
)
Example #19
Source File: Routes.tsx    From gateway-ui with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
BaseRouter = (): ReactElement => (
  <BrowserRouter>
    <Routes>
      <Route path={LANDING_PAGE} element={<LandingPage />} />
      <Route path={SHARE} element={<Share />} />
      <Route path={ACCESS} element={<Access />} />
      <Route path={ACCESS_HASH()} element={<AccessHash />} />
      <Route path={TERMS_AND_CONDITIONS} element={<TermsAndConditions />} />

      {/* ENS compatibility, redirect to download directly*/}
      <Route path={BZZ} element={<RedirectToDownload />} />
      <Route path="*" element={<Page404 />} />
    </Routes>
  </BrowserRouter>
)
Example #20
Source File: App.tsx    From vite-ssr with MIT License 6 votes vote down vote up 
export default function ({ router }: Context) {
  const [count, setCount] = useState(0)
  return (
    <>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/repos">Repos</Link>
      </nav>

      <div>
        <button onClick={() => setCount(count + 1)}>Count:{count}</button>
      </div>

      <Routes>
        {router.routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            element={<route.component route={route} />}
          />
        ))}
      </Routes>
    </>
  )
}
Example #21
Source File: index.tsx    From gear-js with GNU General Public License v3.0 6 votes vote down vote up 
function Routing() {
  const getRoutes = () =>
    routes.map(({ path, Page, isPrivate }) => (
      <Route
        key={path}
        path={path}
        element={
          isPrivate ? (
            <OnLogin fallback={<InfoText text="In order to use all marketplace features, please login" />}>
              <Page />
            </OnLogin>
          ) : (
            <Page />
          )
        }
      />
    ));

  return <Routes>{getRoutes()}</Routes>;
}
Example #22
Source File: router.tsx    From master-frontend-lemoncode with MIT License 6 votes vote down vote up 
Router: React.FunctionComponent = () => {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<NameCollection />} />
        <Route path="users/:name" element={<UserEdit />} />
      </Routes>
    </HashRouter>
  );
}
Example #23
Source File: EvmApp.tsx    From anchor-web-app with Apache License 2.0 6 votes vote down vote up 
export function EvmApp() {
  return (
    <EvmAppProviders>
      <div>
        <GlobalStyle />
        <Header />
        <Routes>
          <Route index={true} element={<Dashboard />} />
          <Route path="/mypage" element={<Mypage />} />
          <Route path="/earn" element={<Earn />} />
          <Route path="/borrow" element={<Borrow />} />
          <Route path="/terms" element={<TermsOfService />} />
          <Route path="/gov/" element={<GovernanceMain />} />
          <Route path="/poll/:id" element={<PollDetail />} />
          <Route path="/bridge/restore" element={<Restore />} />
          <Route path="/claim/all" element={<ClaimAll />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
        <BackgroundTransactions />
      </div>
    </EvmAppProviders>
  );
}
Example #24
Source File: app.tsx    From example with MIT License 6 votes vote down vote up 
export function App() {
	return (
		<EnvironmentSelectorProvider>
			{(connector) => (
				<SdkConnectionProvider connector={connector}>
					<Box>
						<Header/>
						<Container maxWidth="xl" sx={{
							mt: 2,
							display: 'grid',
							gridTemplateColumns: 'minmax(250px, 20%)  1fr',
							gap: "20px"
						}}>
							<Box component="nav">
								<Navigation/>
							</Box>
							<Box component="main">
								<Routes>
									<Route path="/" element={<AboutPage/>}/>
									<Route path="about" element={<AboutPage/>}/>
									<Route path="connect" element={<ConnectPage/>}/>
									<Route path="deploy" element={<DeployPage/>}/>
									<Route path="mint" element={<MintPage/>}/>
									<Route path="sell" element={<SellPage/>}/>
									<Route path="buy" element={<BuyPage/>}/>
									<Route path="bid" element={<BidPage/>}/>
									<Route path="accept-bid" element={<AcceptBidPage/>}/>
									<Route path="*" element={<NotFoundPage/>}/>
								</Routes>
							</Box>
						</Container>
					</Box>
				</SdkConnectionProvider>
			)}
		</EnvironmentSelectorProvider>
	);
}
Example #25
Source File: App.tsx    From vite-electron-react-starter with MIT License 6 votes vote down vote up 
App: React.FC = () => {
  return (
    <>
      <img
        alt="Vue logo"
        src="../assets/logo.svg"
        width="300"
      />
      <BrowserRouter>
        <AppNavigation />
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/about' element={
            <Suspense fallback={<div>Loading...</div>}>
              <About />
            </Suspense>
          } />
          <Route path='*' element={<Home />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}
Example #26
Source File: LinkTo.stories.tsx    From web3uikit with MIT License 6 votes vote down vote up 
InternalLink.decorators = [
    (Story) => (
        <MemoryRouter>
            <Routes>
                <Route path="/" element={<Story />} />
                <Route
                    path="home"
                    element={
                        <LinkTo address="/" type="internal" text="Go Back" />
                    }
                />
            </Routes>
        </MemoryRouter>
    ),
];
Example #27
Source File: index.tsx    From shippo with MIT License 6 votes vote down vote up 
SwitchRoute: React.FC<ISwitchRouteProps> = (props) => {
  return (
    <Routes>
      {props.routes.map((routeProps) => (
        <Route {...routeProps} />
      ))}
    </Routes>
  )
}
Example #28
Source File: index.tsx    From contracts-ui with GNU General Public License v3.0 6 votes vote down vote up 
root.render(
  <HashRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Homepage />} />
        <Route path="add-contract" element={<AddContract />} />
        <Route path="hash-lookup" element={<SelectCodeHash />} />
        <Route path="/instantiate" element={<Instantiate />}>
          <Route path=":codeHash" />
        </Route>
        <Route path="/contract/:address/" element={<Contract />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  </HashRouter>
);
Example #29
Source File: index.tsx    From shippo with MIT License 6 votes vote down vote up 
TempLayout = () => {
  return (
    <Routes>
      <Route
        key="Page_temp_trade_20220108"
        path="/temp_trade_20220108"
        element={<Page_temp_trade_20220108 />}
      ></Route>
    </Routes>
  )
}