react-router-dom#Switch TypeScript Examples

The following examples show how to use react-router-dom#Switch. 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: App.tsx From one-platform with MIT License

6 votes

function App() {
  return (
    <>
      <Switch>
        <Route path="/" component={ AppIndex } exact />
        <Route path="/:appId">
          <AppConsoleShell>
            <Switch>
              <Redirect path="/:appId" to="/:appId/overview" exact />
              <Route path="/:appId/overview" component={ AppOverview } exact />
              <Route path="/:appId/analytics" component={ UnderDevelopment } exact />
              <Route path="/:appId/op-navbar" component={ ConfigureOPNavbar } exact />
              <Route path="/:appId/database" component={ ConfigureDatabase } exact />
              <Route path="/:appId/feedback" component={ FeedbackList } exact />
              <Route path="/:appId/feedback/edit" component={ ConfigureFeedback } exact />
              <Route path="/:appId/lighthouse" component={ ConfigureLighthouse } exact />
              <Route path="/:appId/search" component={ ConfigureSearch } exact />
              <Route path="/:appId/notifications" component={ UnderDevelopment } exact />
              <Route path="/:appId/user-groups" component={ UnderDevelopment } exact />
              <Route path="/:appId/settings" component={ AppSettings } />
              <Route path="*" component={ NotFound } />
            </Switch>
          </AppConsoleShell>
        </Route>
      </Switch>
      <AddAppForm />
    </>
  );
}

Example #2

Source File: App.tsx From Demae with MIT License

6 votes

App = () => {
	return (
		<Switch>
			<Route path={`/`} exact component={Home} />
			<Route path={`/login`} exact component={Login} />
			<Route path={`/home`} exact component={Home} />
			<Route path={`/cart`} exact component={Cart} />
			<Route path={`/account`} exact component={Account} />
			<Route path={`/account/create`} exact component={AccountCreateWorkFlow} />
			<Route path={`/account/orders`} exact component={Order} />
			<Route path={`/account/orders/:orderID`} exact component={Order} />
			<Route path={`/account/payments`} exact component={Payment} />
			<Route path={`/account/payout`} exact component={Payout} />
			<Route path={`/provider/create`} exact component={ProviderCreateWorkFlow} />
			<Route path={`/providers`} exact component={Provider} />
			<Route path={`/providers/:providerID`} exact component={Provider} />
			<Route path={`/providers/:providerID/products`} exact component={Product} />
			<Route path={`/providers/:providerID/products/:productID`} exact component={Product} />
			<Route path={`/providers/:providerID/products/:productID/skus/:skuID`} exact component={SKU} />
			<Route path={`/checkout/shipping/:shippingID`} exact component={Shipping} />
			<Route path={`/checkout/shipping`} exact component={Shipping} />
			<Route path={`/checkout`} exact component={Checkout} />
			<Route path={`/checkout/paymentMethod`} exact component={PaymentMethod} />
			<Route path={`/checkout/paymentMethod/:paymentMethodID`} exact component={PaymentMethod} />
			<Route path={`/checkout/:providerID`} exact component={Checkout} />
			<Route path={`/checkout/:providerID/completed`} exact component={CheckoutCompleted} />
		</Switch>
	)
}

Example #3

Source File: homeRouter.tsx From react_admin with MIT License

6 votes

Routers: React.FC<Iprops> = props => {
  /**
   * 切换路由触发
   * 模拟vue的路由守卫
   */
  const onEnter = useCallback(Component => {
    return <Component {...props} />
  }, [])

  return (
    <ErrorBoundary location={props.location}>
      <Suspense fallback={<Loading />}>
        <Switch>
          <Route exact path="/home" render={() => onEnter(Home)} />
          <Route exact path="/home/about" render={() => onEnter(About)} />
          <Route exact path="/home/echarts" render={() => onEnter(Echarts)} />
          <Route exact path="/home/form" render={() => onEnter(FormTable)} />
          <Route component={NotFound} />
        </Switch>
      </Suspense>
    </ErrorBoundary>
  )
}

Example #4

Source File: index.tsx From landy-react-template with MIT License

6 votes

Router = () => {
  return (
    <Suspense fallback={null}>
      <Styles />
      <Header />
      <Switch>
        {routes.map((routeItem) => {
          return (
            <Route
              key={routeItem.component}
              path={routeItem.path}
              exact={routeItem.exact}
              component={lazy(() => import(`../pages/${routeItem.component}`))}
            />
          );
        })}
      </Switch>
      <Footer />
    </Suspense>
  );
}

Example #5

Source File: App.tsx From akashlytics with GNU General Public License v3.0

6 votes

export function App() {
  const mediaQuery = useMediaQueryContext();
  const classes = useStyles();

  return (
    <div>
      <Helmet defaultTitle="Akashlytics" titleTemplate="Akashlytics - %s" />

      <Header />

      <BetaBanner />

      <div className={clsx(classes.appBody, { [classes.appBodySmall]: mediaQuery.smallScreen })}>
        <Switch>
          <Redirect from="/revenue/daily" to="/graph/daily-akt-spent" />
          <Redirect from="/revenue/total" to="/graph/total-akt-spent" />
          <Route path="/faq">
            <Faq />
          </Route>
          <Route path="/price-compare">
            <PriceCompare />
          </Route>
          <Route path="/graph/:snapshot">
            <Graph />
          </Route>
          <Route path="/deploy">
            <Deploy />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>

      <Footer />
    </div>
  );
}

Example #6

Source File: App.tsx From mano-aloe with MIT License

6 votes

render() {
        return (
            <LanguageContext.Provider value={this.state}>
                <ButtonAppBar />
                <HeaderSection />
                <main className="main">
                    <Suspense fallback={<div>Loading...</div>}>
                        <Switch>
                            <Route exact path='/'>
                                <Redirect to="/home" />
                            </Route>
                            <Route path='/home' component={HomePage}/>
                            <Route path='/game' component={GamePage}/>
                            <Route path='/art' component={ArtPage}/>
                        </Switch>
                    </Suspense>
                </main>
            </LanguageContext.Provider>
        );
    }

Example #7

Source File: App.tsx From firebase-react-typescript-project-template with MIT License

6 votes

App = (): JSX.Element => {
  return (
    <ThemeProvider theme={createTheme("light")}>
      <CssBaseline />
      <SnackbarNotificationProvider>
        <SessionProvider>
          <Router>
            <Suspense fallback={<div />}>
              <Switch>
                <Route path={SIGNIN_ROUTE}>
                  <SigninSignupPage variant="signin" />
                </Route>
                <Route path={SIGNUP_ROUTE}>
                  <SigninSignupPage variant="signup" />
                </Route>
                <Route path={AUTH_ACTION_PATH}>
                  <AuthAction />
                </Route>
                <PrivateRoute path={APP_LANDING}>
                  <LandingPage />
                </PrivateRoute>
                <Redirect to={APP_LANDING} />
              </Switch>
            </Suspense>
          </Router>
        </SessionProvider>
      </SnackbarNotificationProvider>
    </ThemeProvider>
  );
}

Example #8

Source File: index.tsx From typed-react-form with MIT License

6 votes

function Router() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/object-types" component={OneOfObjectForm} />
                <Route path="/object-types-array" component={OneOfObjectArrayForm} />
                <Route path="/custom-inputs" component={CustomInputsForm} />
                <Route path="/field" component={FieldForm} />
                <Route path="/" component={ExampleForm} />
            </Switch>
        </BrowserRouter>
    );
}

Example #9

Source File: index.tsx From dxvote with GNU Affero General Public License v3.0

6 votes

SplitApp = () => {
  // This split between DXvote and Guilds frontends are temporary.
  // We'll eventually converge changes on the Guilds side to DXvote.
  const location = useLocation();
  const isGuilds = location.pathname.startsWith('/guilds');

  const {
    context: { ensService },
  } = useContext();
  const mainnetProvider = useJsonRpcProvider(MAINNET_ID);

  useEffect(() => {
    ensService.setWeb3Provider(mainnetProvider);
  }, [mainnetProvider, ensService]);

  return (
    <EtherSWRManager>
      {!isGuilds ? (
        <Switch>
          <Web3ReactManager>
            <GlobalStyle />
            <Content>
              <Header />
              <Routes />
              <ToastContainer />
            </Content>
          </Web3ReactManager>
        </Switch>
      ) : (
        <GuildsApp />
      )}
    </EtherSWRManager>
  );
}

Example #10

Source File: App.tsx From TutorBase with MIT License

6 votes

function App() {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/">
                    <LoginPage/>
                </Route>
                <Route exact path="/login">
                    <LoginPage/>
                </Route>
                <Route exact path="/signup">
                    <SignUpPage/>
                </Route>
                <Route exact path="/tutor/" >
                    <Dashboard mode="Tutor"/>
                </Route>
                <Route exact path="/tutor/*" >
                    <Dashboard mode="Tutor"/>
                </Route>
                <Route exact path="/home/" >
                    <Dashboard mode="Client"/>
                </Route>
                <Route exact path="/home/*" >
                    <Dashboard mode="Client"/>
                </Route>
            </Switch>
            {/*<ToastProvider*/}
            {/*    placement="top-right"*/}
            {/*    autoDismissTimeout={3000}*/}
            {/*    autoDismiss={true}*/}
            {/*>*/}
            {/*</ToastProvider>*/}
        </BrowserRouter>
    );
}

Example #11

Source File: routes.tsx From NLW-3.0 with MIT License

6 votes

function Routes() {
	return (
		<BrowserRouter>
			<Switch>
				<Route path="/" exact component={Landing} />
				<Route path="/app" component={OrphanegesMap} />

        <Route path="/orphanages/create" component={CreateOrphanage} />
        <Route path="/orphanages/:id" component={Orphanege} />
			</Switch>
		</BrowserRouter>
	);
}

Example #12

Source File: index.tsx From wiregui with MIT License

6 votes

Routes = () => (
  <HashRouter>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/new-tunnel" component={NewTunnel} />
      <Route path="/tunnel/:name" component={TunnelInfo} />
    </Switch>
  </HashRouter>
)

Example #13

Source File: Router.tsx From GTAV-NativeDB with MIT License

6 votes

export default function Router() {
  return (
    <Switch>
      <Route path="/natives/:native">
        <NativesPage />
      </Route>
      <Route path="/natives" exact>
        <NativesPage />
      </Route>
      <Route path="/generate-code/:language" exact>
        <GenerateCodePage />
      </Route>
      <Route path="/generate-code" exact>
        <Redirect to="/generate-code/cpp" />
      </Route>
      <Route path="/generate-header">
        <Redirect to="/generate-code" />
      </Route>
      <Route path="*">
        <Redirect to="/natives" />
      </Route>
    </Switch>
  )
}

Example #14

Source File: AppRouter.tsx From react-tutorials with MIT License

6 votes

AppRouter: FunctionComponent = () => {
  return (
    <Router>
      <RecoilRoot>
        <Suspense fallback={<span>Loading...</span>}>
          <Switch>
            <Route exact path="/" component={App} />
          </Switch>
        </Suspense>
      </RecoilRoot>
    </Router>
  )
}

Example #15

Source File: index.tsx From gobarber-web with MIT License

6 votes

Routes: React.FC = () => (
  <Switch>
    <Route path="/" exact component={SignIn} />
    <Route path="/signup" component={SignUp} />
    <Route path="/forgot-password" component={ForgotPassword} />
    <Route path="/reset-password" component={ResetPassword} />

    <Route path="/dashboard" component={Dashboard} isPrivate />
    <Route path="/profile" component={Profile} isPrivate />
  </Switch>
)

Example #16

Source File: routes.tsx From happy with MIT License

6 votes

function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Landing} />
        <Route path="/app" component={OrphanagesMap} />

        <Route path="/orphanages/create" component={CreateOrphanage} />
        <Route path="/orphanages/:id" component={Orphanage} />
      </Switch>
    </BrowserRouter>
  );
}

Example #17

Source File: index.tsx From generator-earth with MIT License

6 votes

/**
 * 子路由的top container，负责给其下所有孩子提供BaseContext以及route
 * @param props 
 */
export default function Container(props: RouteComponentProps) {
    
    const CONTAINER_ROUTE_PREFIX = props.match.path

    const ROUTE_LIST = `${CONTAINER_ROUTE_PREFIX}/list`,
          ROUTE_ADD  = `${CONTAINER_ROUTE_PREFIX}/add`,
          ROUTE_ITEM = `${CONTAINER_ROUTE_PREFIX}/item/:id`;
          
    return (
        <BaseContext.Provider value={{ CONTAINER_ROUTE_PREFIX }}>
        <Switch>
            <Route path={ROUTE_LIST} component={List} />
            <Route path={ROUTE_ITEM} component={Item} />
            <Route path={ROUTE_ADD}  component={Add} />
            <Redirect to={{pathname: ROUTE_LIST}} />
        </Switch>
        </BaseContext.Provider>
    )
}

Example #18

Source File: AppRouter.tsx From Tiquet with MIT License

6 votes

AppRouter = ({
  cookiesModalVisible,
}: IAppRouter): JSX.Element => (
  <Fragment>
    <BrowserRouter>
      {cookiesModalVisible && <CookiesModal />}
      <Suspense fallback={<Loading display />}>
        <Switch>
          <Route path="/" component={Landing} exact />
          <Route path="/home" component={Landing} />
          <Route path="/auth/callback" component={AuthCallback} />
          <Route path="/auth" component={Auth} />
          <Fragment>
            <Navbar />
            <ProtectedRoute path="/b/:id" component={Board} />
            <ProtectedRoute path="/boards" component={Boards} />
          </Fragment>
        </Switch>
      </Suspense>
    </BrowserRouter>
  </Fragment>
)

Example #19

Source File: App.tsx From DevC-benin-jobs with GNU General Public License v3.0

6 votes

App: React.FC = (): JSX.Element => {
  return (
    <Router>
      <Switch>
        <Route exact path={`/`} component={LandingPage} />
        <Route path={`/${routeNames.signin}`} component={SignIn} />
        <Route path={`/${routeNames.signup}`} component={SignUp} />
      </Switch>
    </Router>
  );
}

Example #20

Source File: App.tsx From cuiswap with GNU General Public License v3.0

6 votes

export default function App() {
  return (
    <Suspense fallback={null}>
      <HashRouter>
        <Route component={GoogleAnalyticsReporter} />
        <Route component={DarkModeQueryParamReader} />
        <AppWrapper>
          <HeaderWrapper>
            <Header />
          </HeaderWrapper>
          <BodyWrapper>
            <Popups />
            <Web3ReactManager>
              <Switch>
                <Route exact strict path="/swap" component={Swap} />
                <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
                <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
                <Route exact strict path="/find" component={PoolFinder} />
                <Route exact strict path="/pool" component={Pool} />
                <Route exact strict path="/create" component={RedirectToAddLiquidity} />
                <Route exact path="/add" component={AddLiquidity} />
                <Route exact path="/add/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
                <Route exact path="/add/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
                <Route exact strict path="/remove/v1/:address" component={RemoveV1Exchange} />
                <Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
                <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
                <Route exact strict path="/migrate/v1" component={MigrateV1} />
                <Route exact strict path="/migrate/v1/:address" component={MigrateV1Exchange} />
                <Route component={RedirectPathToSwapOnly} />
              </Switch>
            </Web3ReactManager>
            <Marginer />
          </BodyWrapper>
        </AppWrapper>
      </HashRouter>
    </Suspense>
  )
}

Example #21

Source File: Router.Auth.tsx From companion-kit with MIT License

6 votes

export default function AnonRouter() {
    return (
        <>
            <Header hasNav={false} />
            <Switch>
                {/* <Route exact path={Routes.SignUp} component={SignUp} /> */}
                <Route exact path={Routes.SignIn} component={SignIn} />
                <Route exact path={Routes.CheckYourEmailBase} component={CheckYourEmail} />

                <Redirect to={Routes.SignIn}  />
            </Switch>
        </>
    );
}

Example #22

Source File: app.tsx From vorb.chat with GNU Affero General Public License v3.0

6 votes

App: React.SFC = () => {

  return <Router>
    <ThemeProvider
      options={{
        primary: 'red',
        secondary: 'green'
      }}>
      <div className="center_wrapper">
        <RTCSignaling address={SIGNALING_ADDRESS} options={SIGNALING_OPTIONS}>
          <ConnectionHandler>
            <Switch>
              <Route path="/c/:room_name">
                <RoomRoute />
              </Route>
              <Route path="/">
                <StartPage />
              </Route>
            </Switch>
          </ConnectionHandler>
        </RTCSignaling>
      </div>
      <Portal />
    </ThemeProvider>
  </Router>
}

Example #23

Source File: Routes.tsx From taskcafe with MIT License

6 votes

Routes: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const { setUser } = useCurrentUser();
  useEffect(() => {
    fetch('/auth/validate', {
      method: 'POST',
      credentials: 'include',
    }).then(async (x) => {
      const response: ValidateTokenResponse = await x.json();
      const { valid, userID } = response;
      if (valid) {
        setUser(userID);
      }
      setLoading(false);
    });
  }, []);
  if (loading) return null;
  return (
    <Switch>
      <Route exact path="/login" component={Login} />
      <Route exact path="/register" component={Register} />
      <Route exact path="/confirm" component={Confirm} />
      <Switch>
        <MainContent>
          <Route path="/p/:projectID" component={Project} />

          <UserRequiredRoute>
            <Route exact path="/" component={Projects} />
            <Route path="/teams/:teamID" component={Teams} />
            <Route path="/profile" component={Profile} />
            <Route path="/admin" component={Admin} />
            <Route path="/tasks" component={MyTasks} />
          </UserRequiredRoute>
        </MainContent>
      </Switch>
    </Switch>
  );
}

Example #24

Source File: index.tsx From community-repo with GNU General Public License v3.0

6 votes

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <div style={{ flexGrow: 1 }}>
        <AppBar position="static" style={{ flexDirection: 'row', backgroundColor: '#4138ff' }}>
          <Toolbar style={{ paddingLeft: '12px', backgroundColor: '#4138ff' }}>
            <Button color="inherit" component={RouterLink} to="/">
              <img style={{ width: 50, height: 50 }} src={joystream} className="App-logo" alt="Joystream logo" />
            </Button>
            <Button color="inherit" component={RouterLink} to="/">Validator Report</Button>
            <Button color="inherit" component={RouterLink} to="/live">WS Live Stats</Button>
          </Toolbar>
        </AppBar>
      </div>
      <div>
        <Switch>
          <Route path="/live">
            <LiveStatsWS />
          </Route>
          <Route path="/">
            <ValidatorReport />
          </Route>
        </Switch>
      </div>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

Example #25

Source File: Routes.tsx From Shopping-Cart with MIT License

6 votes

Routes = () => {
  return (
    <Router>
      <Switch>
        <NomalLayout>
          <Route exact path={ROOT_PATH} component={Cart} />
          <Route path={PRODUCTS_LIST_PATH} component={ProductsList} />
          <Route path={CART_PATH} component={Cart} />
        </NomalLayout>
      </Switch>
    </Router>
  );
}

Example #26

Source File: App.tsx From dashboard-layout with MIT License

6 votes

function App() {
  return (
    <Layout>
      <Switch>
        <Route path="/" exact render={() => <Redirect to={ROUTES.main} />} />
        <Route exact path={ROUTES.main} component={DashboardPage} />
        <Route exact path={ROUTES.orders} component={OrdersPage} />
        <Route exact path={ROUTES.customers} component={CustomersPage} />
        <Route exact path={ROUTES.inventory} component={InventoryPage} />
      </Switch>
    </Layout>
  );
}

Example #27

Source File: router.component.tsx From master-frontend-lemoncode with MIT License

6 votes

RouterComponent: React.FunctionComponent = () => {
  return (
    <Router>
      <Switch>
        <Route
          exact={true}
          path={[switchRoutes.root, switchRoutes.login]}
          component={LoginScene}
        />
        <Route
          exact={true}
          path={switchRoutes.submoduleList}
          component={SubmoduleListScene}
        />
        <Route
          exact={true}
          path={switchRoutes.employees}
          component={EmployeeListScene}
        />
        <Route
          exact={true}
          path={switchRoutes.editEmployee}
          component={EmployeeScene}
        />
      </Switch>
    </Router>
  );
}

Example #28

Source File: App.tsx From avalon.ist with MIT License

6 votes

render() {
    const { loading, authenticated, verified, width, height } = this.state;

    const routeProps = { authenticated, verified };

    const e = (
      <>
        <Router>
          <Switch>
            <LoggedOutOnly
              exact
              path="/"
              authenticated={authenticated}
              component={Login}
            />
            <LoggedOutOnly
              exact
              path="/signup"
              authenticated={authenticated}
              component={Signup}
            />
            <UnverifiedOnly exact path="/verify" {...routeProps} component={Verify} />
            <LoggedInOnly exact path="/lobby" {...routeProps} component={Lobby} />
            <LoggedInOnly path="/profile/:username" {...routeProps} component={Profile} />
            <LoggedInOnly path="/game/:gameId" {...routeProps} component={Game} />
            <Route path="/article/:url" component={Article} />
            <Route component={NoMatch} />
          </Switch>
        </Router>
        <span style={{ display: 'none' }}>
          Window size: {width} x {height}
        </span>
      </>
    );

    return loading === true ? null : e;
  }

Example #29

Source File: index.tsx From react-memory-game with MIT License

6 votes

App: React.FC = () => {
  const themeType = useTypedSelector(({ Theme }) => Theme.type)
  const themeColors = THEME_COLORS[themeType || ThemeTypes.dark]

  return (
    <ThemeProvider theme={themeColors}>
      <GlobalStyles />
      <HashRouter basename={process.env.PUBLIC_URL}>
        <Switch>
          <Route exact path="/" component={DificultyChooser} />
          <Route exact path="/game" component={Game} />
        </Switch>
      </HashRouter>
    </ThemeProvider>
  )
}