react-router-dom#Redirect TypeScript Examples

export function RedirectOldAddLiquidityPathStructure(props: RouteComponentProps<{ currencyIdA: string }>) {
  const {
    match: {
      params: { currencyIdA }
    }
  } = props
  const match = currencyIdA.match(OLD_PATH_STRUCTURE)
  if (match?.length) {
    return <Redirect to={`/add/${match[1]}/${match[2]}`} />
  }

  return <AddLiquidity {...props} />
}

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={`/admin`} exact component={Dashboard} />
			<Route path={`/admin/products`} exact>
				<Redirect to={`/admin/products/public`} />
			</Route>
			<Route path={`/admin/products/public`} exact component={Product} />
			<Route path={`/admin/products/public/:productID`} exact component={Product} />
			<Route path={`/admin/products/public/:productID/skus`} exact component={SKU} />
			<Route path={`/admin/products/public/:productID/skus/:skuID`} exact component={SKU} />
			<Route path={`/admin/products/drafts`} exact component={ProductDrafts} />
			<Route path={`/admin/products/drafts/:productID`} exact component={ProductDrafts} />
			<Route path={`/admin/products/drafts/:productID/skus`} exact component={SKUDrafts} />
			<Route path={`/admin/products/drafts/:productID/skus/:skuID`} exact component={SKUDrafts} />
			<Route path={`/admin/orders`} exact component={Order} />
			<Route path={`/admin/orders/:orderID`} exact component={Order} />
			<Route path={`/admin/provider`} exact component={Provider} />
			<Route path={`/admin/account`} exact component={Account} />
		</Switch>
	)
}

Routers: React.FC<Iprops> = (props) => {
  useEffect(() => {
    const userinfo = localStorage.getItem("userinfo");
    /**
     * sessionStorage中有user信息，但store中没有
     * 说明刷新了页面，需要重新同步user数据到store
     * **/
    if (userinfo && !props.userinfo.uid) {
      props.setUserInfoMy({ _loginName: "admin", _password: "123456" });
    }
  }, []);

  /** 跳转到某个路由之前触发 **/
  const onEnter = useCallback((Component, props) => {
    /**
     *  有用户信息，说明已登录
     *  没有，则跳转至登录页
     * **/
    const userinfo = localStorage.getItem("userinfo");
    if (userinfo) {
      return <Component {...props} />;
    }
    return <Redirect to="/" />;
  }, []);

  return (
    <HashRouter>
      <Suspense fallback={<Loading />}>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/home" render={(props) => onEnter(BasicLayout, props)} />
        </Switch>
      </Suspense>
    </HashRouter>
  );
}

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

PrivateRoute: React.FC<IPrivateRouteProps> = ({ render, ...rest }) => {
  const { currentUser } = useContext(AppContext);

  if (!!currentUser) return <Route {...rest} render={render} />;

  if (currentUser === null) return <Redirect to="/auth" />;

  return (
    <Route
      {...rest}
      render={() => <Loading message="Authenticating" fullScreen />}
    />
  );
}

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

render() {
    if (this.props.authContainer.hasCreatedVault) {
      if (this.props.authContainer.isUnLocked) {
        if (
          !this.props.connectionContainer.connectionStatus &&
          this.props.connectionContainer.connectionRequested
        ) {
          // Not connected and there is a request to connect
          return <Redirect to={Pages.ConnectSigner} />;
        } else {
          if (this.props.authContainer.toSignMessages.length > 0) {
            return <Redirect to={Pages.SignMessage} />;
          } else {
            return this.renderAccountLists();
          }
        }
      } else {
        return this.renderUnlock();
      }
    } else {
      return this.renderCreateNewVault();
    }
  }

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

GuestsRoute: FunctionComponent<MyRouteProps> = ({
  component: Component,
  authenticated,
  ...rest
}) => (
  <Route
    {...rest}
    render={(props) => (authenticated ? <Redirect to="/Members" /> : <Component {...props} />)}
  />
)

Route: React.FC<RouteProps> = ({
  isPrivate = false,
  component: Component,
  ...rest
}) => {
  const { user } = useAuth();

  return (
    <ReactDOMRoute
      {...rest}
      render={({ location }) => {
        return isPrivate === !!user ? (
          <Component />
        ) : (
          <Redirect
            to={{
              pathname: isPrivate ? '/' : '/dashboard',
              state: { from: location },
            }}
          />
        );
      }}
    />
  );
}

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

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

export function RedirectDuplicateTokenIds(props: RouteComponentProps<{ currencyIdA: string; currencyIdB: string }>) {
  const {
    match: {
      params: { currencyIdA, currencyIdB }
    }
  } = props
  if (currencyIdA.toLowerCase() === currencyIdB.toLowerCase()) {
    return <Redirect to={`/add/${currencyIdA}`} />
  }
  return <AddLiquidity {...props} />
}

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

UserRequiredRoute: React.FC<any> = ({ children }) => {
  const { user } = useCurrentUser();
  const location = useLocation();
  if (user) {
    return children;
  }
  return (
    <Redirect
      to={{
        pathname: '/login',
        state: { redirect: location.pathname },
      }}
    />
  );
}

render(): React.ReactNode {
        if (this.state.backCLicked) {
            return <Redirect to="/" />
        }
        if (!this.state.isLoaded) {
            return <div />
        }
        return (
            <Settings
                onClickBack={this.onClickBack}
                onClickStartOnLoginSwitch={this.onChangeStartOnLogin}
                onClickAutoUpdateSwitch={this.onChangeAutoUpdate}
                openAboutApp={() => this.setState({ aboutAppVisible: true })}
                closeAboutApp={() => this.setState({ aboutAppVisible: false })}
                shouldStartOnLogin={this.state.startOnLogin}
                autoUpdate={this.state.autoUpdate}
                onClickQuit={SettingsManager.onClickQuit}
                aboutAppVisible={this.state.aboutAppVisible}
            />
        )
    }

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

LoggedInOnly = ({
  component: Component,
  authenticated,
  verified,
  ...rest
}: CustomRouteProps) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        authenticated ? (
          verified ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{ pathname: "/verify", state: { from: props.location } }}
            />
          )
        ) : (
          <Redirect to={{ pathname: "/", state: { from: props.location } }} />
        )
      }
    />
  );
}

Navigation = () => {
  return (
    <Switch>
      {routes.map((route, idx) => (
        <Route
          key={idx}
          exact={route.exact}
          path={route.path}
          render={props => <route.component {...props} />}
        />
      ))}
      <Redirect to="/" />
    </Switch>
  );
}

render() {
        const { location, authorized, ...otherProps } = this.props;

        if (!authorized) {
            return (
                <Redirect
                    to={{
                        pathname: constants.paths.login,
                        state: { from: location },
                    }}
                />
            );
        }

        return <Route location={location} {...otherProps} />;
    }

function PrivateRoute({ isLoggedIn, children, ...rest }: IPrivateRouteProps) {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        isLoggedIn ? (
          children
        ) : (
          /* istanbul ignore next */
          <Redirect
            to={{
              pathname: "/signin",
              state: { from: location },
            }}
          />
        )
      }
    />
  );
}

AppRouter = () => {
  return (
    <Router>
      <div className="main">
        <Switch>
          <Route path="/workbook/:id" component={Workbook} />
          <Route path="/report/:id" component={Report} />
          <Redirect from="/" to="/workbook/1" />
        </Switch>
      </div>
    </Router>
  )
}

function Render(): JSX.Element {
    const routesComponents = Object.values(routes).map(
        ((route: IRoute) => {
            return <Route 
                key={'route-'+route.path}
                exact
                path={route.path}
                render={route.component}
            />
        })
    )

    return (
        <BrowserRouter>
            <BrowserHistory.ReactRouterSaveHistory />
            <Switch>
                {routesComponents}
                <Redirect from="" to={loading.path} />
            </Switch>
        </BrowserRouter>
    )
}

export default function AccountDetail({ group }) {
    const match = useRouteMatch();
    const accountID = parseInt(match.params.id);

    const account = useRecoilValue(groupAccountByID({ groupID: group.id, accountID: accountID }));

    useTitle(`${group.name} - Account ${account?.name}`);

    if (account === undefined) {
        return <Redirect to="/404" />;
    }

    return (
        <Grid container spacing={2}>
            {account.type === "personal" && (
                <Grid item xs={12}>
                    <MobilePaper>
                        <Typography variant="h6">Balance of {account.name}</Typography>
                        <BalanceHistoryGraph group={group} accountID={accountID} />
                    </MobilePaper>
                </Grid>
            )}
            {account.type === "clearing" && (
                <Grid item xs={12}>
                    <MobilePaper>
                        <Typography variant="h6">Clearing distribution of {account.name}</Typography>
                        <ClearingAccountDetail group={group} account={account} />
                    </MobilePaper>
                </Grid>
            )}
            <Grid item xs={12}>
                <MobilePaper>
                    <Typography variant="h6">Transactions involving {account.name}</Typography>
                    <AccountTransactionList group={group} accountID={accountID} />
                </MobilePaper>
            </Grid>
        </Grid>
    );
}

Route: React.FC<RouteProps> = ({
  isPrivate = false,
  component: Component,
  ...rest
}) => {
  const { user } = useAuth();

  return (
    <ReactDOMRoute
      {...rest}
      render={({ location }) => {
        return isPrivate === !!user ? (
          <Component />
        ) : (
          <Redirect
            to={{
              pathname: isPrivate ? '/' : '/dashboard',
              state: { from: location },
            }}
          />
        );
      }}
    />
  );
}

RedirectToDefaultNetwork = ({ children }: { children: React.ReactNode }) => {

  const searchParams = useSearchParams()
  const networkUrl = useNetworkUrl()

  const userPrefContext = useContext(UserPrefContext)
  const { networkMap } = userPrefContext!

  if (networkUrl === '') {
    return <Redirect to={{
      pathname: searchParams,
      search: '?' + new URLSearchParams({ network: networkMap.keys().next().value || 'https://api.zilliqa.com' }).toString(),
    }}
    />
  } else {
    return <>{children}</>
  }
}

Router: React.FC = () => {
  return (
    <IonApp className={'dark-theme'}>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Switch>
              <Route path="/viewAction/:id" component={ViewActionPage} exact />
              <Route path="/createAction" component={CreateVolunteerActionPage} exact />
              <Route path="/actions" component={ActionPage} exact />
              <Route path="/map" component={ActionsMapPage} exact />
              <Route path="/schedule" component={SchedulePage} exact />
              <Route path="/reports" component={ActionReportPage} exact />
              <Route path="/products" component={ProductsPage} />
              <Route path="/manageProduct/:id" component={ViewProductPage} exact />
              <Route path="/createProduct" component={CreateProductPage} exact />
              <Route path="/volunteers" component={VolunteersPage} />
              <Route path="/manageVolunteer/:id" component={ViewVolunteerPage} exact />
              <Route path="/createVolunteer" component={CreateVolunteerPage} exact />
              <Route path="/recipients" component={RecipientsPage} exact />
              <Route path="/manageRecipient/:id" component={ViewRecipientPage} exact />
              <Route path="/createRecipient" component={CreateRecipientPage} exact />
              <Route path="/distributionCentre" component={DistributionCentrePage} exact />
              <Route path="/manageDistributionCentre/:id" component={ViewDistributionCentrePage} exact />
              <Route path="/createDistributionCentre" component={CreateDistributionCentrePage} exact />
              <Route path="/profile" component={ProfilePage} exact />
              <Redirect to={{ pathname: "actions" }} />
            </Switch>
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  );
}