Redirect To Previous Page in ReactJS

Viewed 7423

I have a problem on redirect to the previous page since i do a check isLoggedIn. The problem right now is after check isLoggedIn it redirect to the default route. How do i maintain the page where I'm into? What i did right now is using the referer but it is undefined. Pls help me find another way. Pls check my code below:

Login.js

const Form = (props) => {
    const classes = useStyles();
    const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
    const referer = props.referer;
    const history = useHistory();

    console.log(history);

    const { values, touched, errors, isSubmitting, handleChange, handleBlur, handleSubmit } = props;

    if (isLoggedIn) {
      return <Redirect to={referer} />;
    }

    return (
      <div className={classes.root}>
        <Grid container direction="row" justify="center">
          <Grid item lg={4} md={5} xs={10}>
            <Card>
              <form onSubmit={handleSubmit}>
                <CardHeader
                  title="LOGIN"
                  classes={{
                    title: classes.cardHeader,
                  }}
                  className={classes.cardHeader}
                />

                <CardContent className={classes.textFieldSection}>
                  <TextField
                    fullWidth
                    label="Username"
                    name="username"
                    type="text"
                    variant="outlined"
                    value={values.username}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    helperText={touched.username ? errors.username : ''}
                    error={touched.username && Boolean(errors.username)}
                    InputProps={{
                      endAdornment: (
                        <InputAdornment>
                          <AccountCircle />
                        </InputAdornment>
                      ),
                    }}
                  />
                  <TextField
                    fullWidth
                    label="Password"
                    name="password"
                    style={{ marginTop: '1rem' }}
                    type="password"
                    variant="outlined"
                    value={values.password}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    helperText={touched.password ? errors.password : ''}
                    error={touched.password && Boolean(errors.password)}
                    InputProps={{
                      endAdornment: (
                        <InputAdornment>
                          <LockIcon />
                        </InputAdornment>
                      ),
                    }}
                  />
                </CardContent>

                <CardActions className={classes.loginButtonSection}>
                  <Button
                    type="submit"
                    color="primary"
                    variant="contained"
                    className={classes.loginButton}
                    disabled={isSubmitting}
                  >
                    Log In
                  </Button>
                </CardActions>

              </form>
            </Card>
          </Grid>
        </Grid>
      </div>
    );
  };

  let yup = require('yup');

  export const Login = (props) => {
    const dispatch = useDispatch();

    const MyFormWithFormik = withFormik({
      mapPropsToValues: ({ username, password }) => {
        return {
          username: username || '',
          password: password || '',
        };
      },
      validationSchema: yup.object().shape({
        username: yup.string().required('Enter your username'),
        password: yup.string().required('Enter your password'),
      }),
      handleSubmit: (values, { setSubmitting }) => {
        dispatch(login(values.username, values.password));
        setSubmitting(false);
      },
    })(Form);

    return <MyFormWithFormik />;
  };

  Form.propTypes = {
    className: PropTypes.string,
  };

  export default Login;

PrivateRoute.js

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import axios from 'axios';
import { useSelector } from 'react-redux';

function PrivateRoute({ component: Component, ...rest }) {
  const authTokens = useSelector((state) => state.auth.access_token);

  function checkTokenExpiry() {
    if (authTokens) {
      axios.interceptors.request.use(
        function (config) {
          const token = `Bearer ${authTokens}`;
          config.headers.Authorization = token;
          console.log(config);
          return config;
        },
        (error) => {
          console.log(error);
          Promise.reject(error);
        }
      );
    }
  }

  if (authTokens != null) {
    checkTokenExpiry();
  }

  return (
    <Route
      {...rest}
      render={(props) =>
        authTokens ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { referer: props.location } }} />
        )
      }
    />
  );
}

export default PrivateRoute;

PrivateAdminOnlyRoute

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import axios from 'axios';
import { useSelector } from 'react-redux';

function PrivateAdminOnlyRoute({ component: Component, ...rest }) {
  const authTokens = useSelector((state) => state.auth.access_token);
  const isAdmin = useSelector((state) => state.auth.is_admin);

  function checkTokenExpiry() {
    if (authTokens) {
      axios.interceptors.request.use(
        function (config) {
          const token = `Bearer ${authTokens}`;
          config.headers.Authorization = token;
          console.log(config);
          return config;
        },
        (error) => {
          console.log(error);
          Promise.reject(error);
        }
      );
    }
  }

  if (authTokens != null) {
    checkTokenExpiry();
  }

  return (
    <Route
      {...rest}
      render={(props) =>
        authTokens && isAdmin === true ? (
          <Component {...props} />
        ) : authTokens && (isAdmin === false || undefined || null) ? (
          <Redirect to={{ pathname: '/pending', state: { referer: props.location } }} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { referer: props.location } }} />
        )
      }
    />
  );
}

export default PrivateAdminOnlyRoute;

Routes.js

import React, { useState } from 'react';
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Common from './pages/Common';

function Routes() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
        <PrivateRoute path="/" component={Common} />
      </Switch>
    </Router>
  );
}

export default Routes;
1 Answers

Using state inside Redirect isn't assigan state to props but to location


      import { useLocation } from 'react-router-dom';


      const location = useLocation();
      const referer = location.state && location.state.referer

another thing about your code (that not connect directly to your issue) is

(isAdmin === false || undefined || null)

isAdmin compared just to false, and in case isAdmin isn't false it is not being compared to undefined, but undefined stand by itself (with falsy behavior...), and so goes for null

hope it's helpful :)

Related