react-router-dom#Switch TypeScript Examples

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 />
    </>
  );
}

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>
	)
}

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>
  )
}

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>
  );
}

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>
  );
}

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>
        );
    }

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>
  );
}

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>
    );
}

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>
  );
}

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>
    );
}

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>
	);
}

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

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>
  )
}

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

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>
)

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>
  );
}

/**
 * 子路由的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>
    )
}

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>
)

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>
  );
}

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>
  )
}

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>
        </>
    );
}

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>
}

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>
  );
}

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')
);

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>
  );
}

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>
  );
}

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>
  );
}

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;
  }

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>
  )
}