react-router-dom#Redirect TypeScript Examples

The following examples show how to use react-router-dom#Redirect. 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 vote down vote up
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 vote down vote up
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>
	)
}
Example #3
Source File: router.tsx    From react_admin with MIT License 6 votes vote down vote up
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>
  );
}
Example #4
Source File: App.tsx    From akashlytics with GNU General Public License v3.0 6 votes vote down vote up
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 #5
Source File: PrivateRoute.tsx    From firetable with Apache License 2.0 6 votes vote down vote up
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 />}
    />
  );
}
Example #6
Source File: App.tsx    From mano-aloe with MIT License 6 votes vote down vote up
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 vote down vote up
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: Home.tsx    From clarity with Apache License 2.0 6 votes vote down vote up
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();
    }
  }
Example #9
Source File: Router.tsx    From GTAV-NativeDB with MIT License 6 votes vote down vote up
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 #10
Source File: GuestsRoute.tsx    From react-tutorials with MIT License 6 votes vote down vote up
GuestsRoute: FunctionComponent<MyRouteProps> = ({
  component: Component,
  authenticated,
  ...rest
}) => (
  <Route
    {...rest}
    render={(props) => (authenticated ? <Redirect to="/Members" /> : <Component {...props} />)}
  />
)
Example #11
Source File: Route.tsx    From gobarber-web with MIT License 6 votes vote down vote up
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 },
            }}
          />
        );
      }}
    />
  );
}
Example #12
Source File: index.tsx    From generator-earth with MIT License 6 votes vote down vote up
/**
 * 子路由的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 #13
Source File: ProtectedRoute.tsx    From Tiquet with MIT License 6 votes vote down vote up
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>
  );
}
Example #14
Source File: redirects.tsx    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up
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} />
}
Example #15
Source File: Router.Auth.tsx    From companion-kit with MIT License 6 votes vote down vote up
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 #16
Source File: Routes.tsx    From taskcafe with MIT License 6 votes vote down vote up
UserRequiredRoute: React.FC<any> = ({ children }) => {
  const { user } = useCurrentUser();
  const location = useLocation();
  if (user) {
    return children;
  }
  return (
    <Redirect
      to={{
        pathname: '/login',
        state: { redirect: location.pathname },
      }}
    />
  );
}
Example #17
Source File: Settings.tsx    From SpaceEye with MIT License 6 votes vote down vote up
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}
            />
        )
    }
Example #18
Source File: App.tsx    From dashboard-layout with MIT License 6 votes vote down vote up
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 #19
Source File: LoggedInOnly.tsx    From avalon.ist with MIT License 6 votes vote down vote up
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 } }} />
        )
      }
    />
  );
}
Example #20
Source File: Navigation.tsx    From portfolio with MIT License 6 votes vote down vote up
Navigation = () => {
  return (
    <Switch>
      {routes.map((route, idx) => (
        <Route
          key={idx}
          exact={route.exact}
          path={route.path}
          render={props => <route.component {...props} />}
        />
      ))}
      <Redirect to="/" />
    </Switch>
  );
}
Example #21
Source File: AuthorizedRoute.tsx    From hive with MIT License 6 votes vote down vote up
render() {
        const { location, authorized, ...otherProps } = this.props;

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

        return <Route location={location} {...otherProps} />;
    }
Example #22
Source File: PrivateRoute.tsx    From End-to-End-Web-Testing-with-Cypress with MIT License 6 votes vote down vote up
function PrivateRoute({ isLoggedIn, children, ...rest }: IPrivateRouteProps) {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        isLoggedIn ? (
          children
        ) : (
          /* istanbul ignore next */
          <Redirect
            to={{
              pathname: "/signin",
              state: { from: location },
            }}
          />
        )
      }
    />
  );
}
Example #23
Source File: router.tsx    From redux-with-domain with MIT License 6 votes vote down vote up
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>
  )
}
Example #24
Source File: index.tsx    From NetStatus with MIT License 6 votes vote down vote up
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>
    )
}
Example #25
Source File: AccountDetail.tsx    From abrechnung with GNU Affero General Public License v3.0 6 votes vote down vote up
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>
    );
}
Example #26
Source File: Route.tsx    From front-entenda-direito with GNU General Public License v3.0 6 votes vote down vote up
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 },
            }}
          />
        );
      }}
    />
  );
}
Example #27
Source File: Layout.tsx    From devex with GNU General Public License v3.0 6 votes vote down vote up
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}</>
  }
}
Example #28
Source File: Router.tsx    From OpenVolunteerPlatform with MIT License 6 votes vote down vote up
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>
  );
}
Example #29
Source File: index.route.tsx    From dnde with GNU General Public License v3.0 6 votes vote down vote up
Routing = () => {
  return (
    <Switch>
      <Route exact path={['', '/list']} component={List} />
      <Route path="/template/:templateId" component={EditPage} />
      <Route path="*">
        <Redirect to="/" />
      </Route>
    </Switch>
  );
}