react-router-dom#Redirect JavaScript Examples

DeckMode = ({
  children,
  extracted,
  keyboardTarget,
  touchTarget,
  slideNavigation = true,
  modeNavigation = true,
  ...props
}) => {
  const basepath = props.basepath ? props.basepath : '';
  const slides = React.Children.toArray(children);

  return (
    <HashRouter {...props}>
      <RootState mode={deckModes.NORMAL} basepath={basepath} extracted={extracted} slideLength={slides.length}>
        <Switch>
          <Redirect exact from="/" to={deckModes.properties[deckModes.NORMAL].path} />
          {
            deckModes.properties.map(({Component, name, path}) => (
              <Route path={`/${path}`} key={name}>
                <Component
                  keyboardTarget={keyboardTarget}
                  touchTarget={touchTarget}
                  slideNavigation={slideNavigation}
                  modeNavigation={modeNavigation}
                >
                  {slides}
                </Component>
              </Route>
            ))
          }
        </Switch>
      </RootState>
    </HashRouter>
  );
}

export default function Pool({ params }) {
  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search)
  }, [])

  const AddLiquidityParams = () => <AddLiquidity params={params} />

  const RemoveLiquidityParams = () => <RemoveLiquidity params={params} />

  const CreateExchangeParams = () => <CreateExchange params={params} />

  return (
    <>
      <ModeSelector />
      {/* this Suspense is for route code-splitting */}
      <Suspense fallback={null}>
        <Switch>
          <Route exact strict path="/add-liquidity" component={AddLiquidityParams} />
          <Route exact strict path="/remove-liquidity" component={RemoveLiquidityParams} />
          <Route exact strict path="/create-exchange" component={CreateExchangeParams} />
          <Route
            path="/create-exchange/:tokenAddress"
            render={({ match }) => {
              return (
                <Redirect to={{ pathname: '/create-exchange', state: { tokenAddress: match.params.tokenAddress } }} />
              )
            }}
          />
          <Redirect to="/add-liquidity" />
        </Switch>
      </Suspense>
    </>
  )
}

/**
   * the render of the button and the data that returns
   * @function
   * @returns {void}
   */
  render() {
    let FBcontant;

    if (this.state.islogin) {
      FBcontant = <Redirect to="/Home"></Redirect>;
    } else {
      FBcontant = (
        <FacebookLogin
          render={(renderProps) => (
            <button disabled={renderProps.enable}>
              <img
                alt="facebookicon"
                src="http://pngimg.com/uploads/facebook_logos/facebook_logos_PNG19754.png"
                className="facebookicon"
              ></img>
              login with facebook
            </button>
          )}
          appId=""
          autoLoad={false}
          fields="name,email,picture"
          onClick={this.componentClicked}
          callback={this.responseFacebook}
          size="medium"
        />
      );
    }

    return <div>{FBcontant}</div>;
  }

PrivateRoute = ({
  component: Component,
  id,
  isLoading,
  isAuthenticated,
  user,
  ...rest
}) => (
  <Route
    {...rest}
    render={(props) => {
      let newId = id;
      if (props.match.params.activityId) {
        newId = props.match.params.activityId;
      } else if (props.match.params.playlistId) {
        newId = props.match.params.playlistId;
      } else if (props.match.params.projectId) {
        newId = props.match.params.projectId;
      }

      if (!isLoading && !isAuthenticated) {
        return (
          <Redirect to="/login" />
        );
      }

      if (user && !user.subscribed) {
        return (
          <SubscribePage />
        );
      }

      return (
        <Component {...props} {...rest} key={newId} />
      );
    }}
  />
)

PublicRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      !isLoggedIn() ? (
        <Fragment>
          <WelcomeNavigationBar />
          <Component {...props} />
        </Fragment>
      ) : (
        <Redirect to={{ pathname: '/' }} />
      )
    }
  />
)

Dashboard = () => {
  const { user, isAuthenticated } = useSelector((state) => state.auth);
  const boards = useSelector((state) => state.board.boards);
  const loading = useSelector((state) => state.board.dashboardLoading);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getBoards());
  }, [dispatch]);

  useEffect(() => {
    document.title = 'Your Boards | TrelloClone';
  }, []);

  if (!isAuthenticated) {
    return <Redirect to='/' />;
  }

  return (
    <div className='dashboard-and-navbar'>
      <Navbar />
      <section className='dashboard'>
        <h1>Welcome {user && user.name}</h1>
        <h2>Your Boards</h2>
        {loading && <CircularProgress className='dashboard-loading' />}
        <div className='boards'>
          {boards.map((board) => (
            <Link key={board._id} to={`/board/${board._id}`} className='board-card'>
              {board.title}
            </Link>
          ))}
          <CreateBoard />
        </div>
      </section>
    </div>
  );
}

/**
 * Component for the user to log in
 * @param {*} props 
 */
function Login(props) {
  return (
    <div id="login-container">
      <LoggedOut>
        <div id="login-card">
          <img
            alt="Viade logo"
            src={process.env.PUBLIC_URL + "/viade-logo.svg"}
          ></img>
          <h1>
            <FormattedMessage id="LoginTitle" />
          </h1>
          <p>
            <FormattedMessage id="LoginParagraph" />
          </p>
        </div>
        <div id="clipped"></div>
        <div id="login-another-div">
          <h3 data-testid="login-header">
            <FormattedMessage id="LoginButtonTitle" />
          </h3>
          <AuthButton
            popup="https://solid.github.io/solid-auth-client/dist/popup.html"
            login={<FormattedMessage id="LoginButton" />}
            logout={<FormattedMessage id="LogoutButton" />}
          />
        </div>
      </LoggedOut>
      <LoggedIn>
        <Redirect to="/dashboard"></Redirect>
      </LoggedIn>
    </div>
  );
}

RefreshRoute = ({ component: Component, isDataAvailable, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isDataAvailable ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/",
          }}
        />
      )
    }
  />
)

NotLoggedInLayout = props => {
  const { component: Component, webId, ...rest } = props;
  const { t } = useTranslation();
  const ComponentWrapper = styled(Component)`
    padding-bottom: 60px;
    height: 100%;
    padding-top: 60px;
  `;
  return !webId ? (
    <Route
      {...rest}
      component={matchProps => (
        <Container>
          <NavBar
            {...matchProps}
            toolbar={[
              {
                component: () => <LanguageDropdown {...{ t, ...props }} />,
                id: 'language'
              }
            ]}
          />
          <ComponentWrapper {...matchProps} />
        </Container>
      )}
    />
  ) : (
    <Redirect to="/welcome" />
  );
}

render() {
    return (
      <div>
        <Router>
          <Route exact path="/" component={Main} />
          <Route exact path="/main" component={Main} />
          <Route exact path="/table/:name" component={Datasource} />
          <Route exact path="/form/course/:id" component={CourseForm} />
          <Route exact path="/form/group/:course/:number" component={GroupForm} />
          <Route exact path="/form/group/:course" component={GroupForm} />
          <Route
            exact
            path="/login"
            component={() => <Login app={this.props.app} />}
          />
          {!this.state.loggedIn ? <Redirect to="/login" /> : <div></div>}
        </Router>
      </div>
    );
  }

PrivateRoute = ({ component: Component, ...rest }) => {
	return (
		<Route
			{...rest}
			render={(props) =>
				localStorage.getItem('AUTH_TOKEN') ? (
					<Component {...props} />
				) : (
					<Redirect to='/' />
				)
			}
		/>
	);
}

PrivateRoute = ({component: Component, ...rest})=>{
    return (
        <Route {...rest} render={props => {
            if (localStorage.getItem('token')){
                return <Component {...props} />
            } else {
                return <Redirect exact path='/redirect' />
            }
        }} />
    )
}

PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={rest => {
        if (localStorage.getItem('token')) {
          return <Component {...rest} />;
        } else {
          return <Redirect to="/" />;
        }
      }}
    />
  );
}

ProtectedRoute = (props) => {
    const { component: Component, ...rest } = props;
    return (
        <Route
            {...rest}
            render={(renderProps) =>
                localStorage.getItem("token") ? (
                    <Component {...renderProps} />
                ) : (
                    <Redirect to="/login" />
                )
            }
        />
    );
}

PrivateRouteAdmins = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props => {
        if (
          localStorage.getItem("token") &&
          localStorage.getItem("member-type") === "admins"
        ) {
          return <Component {...props} />;
        } else {
          return <Redirect to="/login" />;
        }
      }}
    />
  );
}

export default function WritersFavoriteGrants() {
  const faveArr = useSelector((state) => state.favorites.favorites);
  const user = useSelector((state) => state.profileInfo.profileDetails);
  const classes = useStyles();

  if (faveArr.length === 0) {
    return <Redirect to="/Grants" />;
  }
  return (
    <div>
      <Typography variant="h3" className={classes.h3}>
        <Grid container justify="center">
          <Grid item>
            {user.org_name !== "" ? user.org_name : user.first_name}'s Favorite
            Grants
          </Grid>
        </Grid>
      </Typography>
      {faveArr.map((grant) => {
        return (
          <div key={grant.id} className={classes.container}>
            <GrantCard data={grant} />
          </div>
        );
      })}
    </div>
  );
}

function ProtectedRoute(props) {
  const { isAuthenticated } = useAuth0();

  return localStorage.getItem("token") !== null ? (
    <props.Component />
  ) : (
    <Redirect to={{ pathname: "/" }} />
  );

  //   const { component: Component, ...rest } = props;

  //   return (
  //     <Route
  //       {...rest}
  //       render={(renderProps) => {
  //         if (isAuthenticated) {
  //           return <Component {...renderProps} />;
  //         } else {
  //           return <Redirect to="/login" />;
  //         }
  //       }}
  //     />
  //   );
}

PrivateRoute = props => {
  const { component: Component, ...rest } = props;
  const isAuthenticated = !!localStorage.getItem("idToken");

  // TODO add some kind of token expiration check

  return isAuthenticated ? (
    <Route component={Component} {...rest} />
  ) : (
    <Redirect to="/" />
  );
}

PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      localStorage.getItem('token') ? (
        <Component {...props} />
      ) : (
        <Redirect to='/' />
      )}
  />
)

PrivateRoute = ({ component: Component, ...rest }) => {
    return (
      <Route
        {...rest}
        render={props => {
          if (localStorage.getItem('token')) {
            return <Component {...props} />;
          } else {
            return <Redirect to="/" />;
          }
        }}
      />
    );
  }

ProtectedRoute = ({component: Component, ...props}) => {
  
    return(
        <Route
            {...props}
            render={ props => {
            if (localStorage.getItem('token')){
                return <Component {...props}/>;
            } else {
                return <Redirect to='/login' />
            }
            }}
        />
    );
}

render() {
		console.log('PROPS', this.props)
		const {component: Component, ...rest} = this.props;
		const {loaded} = this.state;

		if (!this.session && !loaded) {
			return <Route {...rest} render={props => <Redirect to={{pathname: '/login', state: {from: props.location}}}/>}/>
		}

		let token = null
		if (this.session) {
			token = JSON.parse(this.session).token
		}
		if (token) {
			return <Route {...rest} render={props => <Component {...props}/>}/>
		} else {
			return <Route {...rest} render={props => <Redirect to={{pathname: '/login', state: {from: props.location}}}/>}/>
		}
	}

render () {
    return (
      <Suspense fallback={<Spinner/>}>
        <Switch>
          <Route exact path="/dashboard" component={ Dashboard } />


          <Route path="/basic-ui/buttons" component={ Buttons } />
          <Route path="/basic-ui/dropdowns" component={ Dropdowns } />
          <Route path="/basic-ui/typography" component={ Typography } />


          <Route path="/form-Elements/basic-elements" component={ BasicElements } />

          <Route path="/tables/basic-table" component={ BasicTable } />


          <Route path="/icons/mdi" component={ Mdi } />


          <Route path="/charts/chart-js" component={ ChartJs } />


          <Route path="/user-pages/login-1" component={ Login } />
          <Route path="/user-pages/register-1" component={ Register1 } />
          <Route path="/user-pages/lockscreen" component={ Lockscreen } />

          <Route path="/error-pages/error-404" component={ Error404 } />
          <Route path="/error-pages/error-500" component={ Error500 } />

          <Route path="/general-pages/blank-page" component={ BlankPage } />


          <Redirect to="/dashboard" />
        </Switch>
      </Suspense>
    );
  }

/**
 * A wrapper for <Route> that redirects to the login
 * @param {Object} props - Route props
 * @param {string} props.path - Path of route
 * @param {React.Component} props.component - Path of route
 * @returns {React.Component}
 */
export function PrivateRoute({ children, path, ...rest }) {
  return (
    <AuthCheck
      key={path}
      fallback={
        <Redirect
          to={{
            pathname: LOGIN_PATH,
            state: { from: path },
          }}
        />
      }>
      {children || <Route key={`Route-${path}`} path={path} {...rest} />}
    </AuthCheck>
  );
}

render(){
        if(this.state.redirect){
            return <Redirect to="/login"/>
         }
    return (
        <div>
            <nav className="navbar navbar-expand-lg navbar-light fixed-top">
                <div className="container">
                    <Link className="navbar-brand" to={"/login"}>GB-GCGC</Link>
                        <div className="collapse navbar-collapse" id="navbarTogglerDemo02"></div>
                            <button type="submit" className="btn btn-danger" onClick={this.logout}>Logout</button>
                 </div>
            </nav>
            <div className='centered'>
                <h3>
                    {this.props.value}
                </h3>
            </div>
        </div>
    )
    }

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/admin" component={Admin} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

PrivateRoute = ({ path, component: Component }) => {
  const { id } = useSelector(
    state => ({
      id: state.auth.userData.id
    }),
    shallowEqual
  );

  return (
    <Layout>
      <Route
        exact
        path={path}
        render={() => (id ? <Component /> : <Redirect to={paths.LOGIN} />)}
      />
    </Layout>
  );
}

function CustomRoute(props) {
  const [returnedRoute, setReturnedRoute] = useState();

  useEffect(() => {
    switch (props.isMember) {
      case true:
        return setReturnedRoute(<Route {...props} />);
      case false:
        return setReturnedRoute(<Redirect to="/become-a-member" />);
      default:
        return setReturnedRoute(<Route {...props} />);
    }
  }, [props]);

  return <>{returnedRoute}</>;
}

PrivateRoute = ({ component: Component,  ...rest }) => (
  <Route {...rest} render={(props) => (
    localStorage.getItem('users')
      ? <Component {...props} />
      : <Redirect to={{
          pathname: '/login',
          state: { from: props.location }
        }} />
  )} />
)