react-router-dom#Route 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>
  )
}

public render() {
    const {env} = this.state;
    return (
      <IntlProvider locale={env.lang} messages={this.getMessage()}>
        <Router>
          <div className="App">
            <Route exact path='/' >{this.drawMain()}</Route>
            <Route exact path='/public' >{this.drawMain()}</Route>
            <Route exact path='/contributors' ><Contributors lang={env.lang} onSwitchLang={this.handleSwitchLocale} /></Route>
            <Route exact path='/algorithm' ><AlgorithmPage lang={env.lang} onSwitchLang={this.handleSwitchLocale} /></Route>
          </div>
        </Router>
      </IntlProvider>
    );
  }

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

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

CustomBrowserRouter: React.FC<ICustomBrowserProps> = ({ children }) => (
  <BrowserRouter>
    <Route>
      {(routeProps) => (
        <RouterContext.Provider value={routeProps}>
          {children}
        </RouterContext.Provider>
      )}
    </Route>
  </BrowserRouter>
)

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

NavLink = (props: { item: MenuItem }) => {
  let item = props.item;
  // Based on https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
  return (
    <Route
      path={item.path}
      exact={item.exact}
      children={props => {
        const cls = props.match ? 'active' : '';
        return (
          <li
            className={['nav-item', cls].filter(x => x).join(' ')}
            title={item.label}
            data-toggle="tooltip"
            data-placement="right"
          >
            <Link to={item.path} className="nav-link">
              <div style={{ margin: '0 10px 0 20px' }}>{item.icon}</div>
              <span className="nav-link-text">{item.label}</span>
              <img className="svg-additional" src={item.additionalIcon} />
            </Link>
          </li>
        );
      }}
    />
  );
}

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

SubmitProposalPage = observer(() => {
  let match = useRouteMatch();

  return (
    <Switch>
      <Route path={`${match.path}/custom`}>
        <NewProposalPage />{' '}
      </Route>
      <Route path={`${match.path}/contributor`}>
        <ContributorProposalPage />{' '}
      </Route>
    </Switch>
  );
})

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

SwitchRoute: React.FC<ISwitchRouteProps> = (props) => {
  return (
    <Routes>
      {props.routes.map((routeProps) => (
        <Route {...routeProps} />
      ))}
    </Routes>
  )
}

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

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

// @ts-ignore 注释
ReactDOM.render(
    <Provider {...Store}>
        <LocaleProvider locale={zhCN}>
            <HashRouter>
                <Route component={App}/>
            </HashRouter>
        </LocaleProvider>
    </Provider>
    ,
    document.getElementById('root')
)

ProtectedRoute = ({
  fetching,
  isLogged,
  component: Component,
  ...rest
}: Partial<IProps>): JSX.Element => {
  return (
    <Fragment>
      {!fetching && (
        isLogged
          ? <Route {...rest} render={props => <Component {...rest} {...props} />} />
          : <Redirect to="/auth?mode=login" />
      )
      }
    </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 Router(){
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/meet" element={<Meet/>} />
      </Routes>
    </BrowserRouter>
  )
}

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

MainLayout: React.FC = () => {
  const scrollPosition = useRef<number>(0)
  const location = useLocation()
  const navigationType = useNavigationType()
  const [cachedLocation, setCachedLocation] = useState(location)
  const locationState = location.state as RoutingState
  const [openDialog, closeDialog] = useConfirmationModal({
    title: 'Outdated browser detected',
    description:
      'It seems the browser version you are using is not fully supported by Joystream. Some of the features may be broken or not accessible. For the best experience, please upgrade your browser to the latest version.',
    iconType: 'warning',
    primaryButton: {
      text: 'Click here to see instructions',
      onClick: () => window.open('https://www.whatismybrowser.com/guides/how-to-update-your-browser/auto'),
    },
    onExitClick: () => closeDialog(),
  })

  useEffect(() => {
    if (isBrowserOutdated) {
      openDialog()
    }
  }, [openDialog])

  useEffect(() => {
    if (location.pathname === cachedLocation.pathname) {
      return
    }

    setCachedLocation(location)

    if (locationState?.overlaidLocation?.pathname === location.pathname) {
      // if exiting routing overlay, skip scroll to top
      return
    }
    if (navigationType !== 'POP') {
      scrollPosition.current = window.scrollY
    }
    // delay scroll to allow transition to finish first
    setTimeout(() => {
      window.scrollTo(0, navigationType !== 'POP' ? 0 : scrollPosition.current)
    }, parseInt(transitions.timings.routing) + ROUTING_ANIMATION_OFFSET)
  }, [location, cachedLocation, locationState, navigationType])

  return (
    <>
      <CookiePopover />
      <Routes>
        <Route path={absoluteRoutes.embedded.video()} element={<EmbeddedView />} />
        <Route path={BASE_PATHS.viewer + '/*'} element={<ViewerLayout />} />
        <Route path={BASE_PATHS.legal + '/*'} element={<LegalLayout />} />
        <Route path={BASE_PATHS.studio + '/*'} element={<LoadableStudioLayout />} />
        <Route path={BASE_PATHS.playground + '/*'} element={<LoadablePlaygroundLayout />} />
      </Routes>
      <AdminOverlay />
    </>
  )
}