重定向到 ReactJS 中的上一页

Question

我在检查 isLoggedIn 后在重定向到上一页时遇到问题。现在的问题是在检查 isLoggedIn 后它重定向到默认路由。我如何维护我所在的页面？我现在所做的是使用 referer 但它是未定义的。请帮我找到另一种方法。请检查下面我的代码：

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;

Answer 1

在 Redirect 中使用 state 并不是 state 到 props 而是 location

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


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

关于您的代码的另一件事（与您的问题没有直接联系）是

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

isAdmin 仅与 false 进行比较，如果 isAdmin 不是 false，则不会与 undefined 进行比较，而是 undefined 独立存在（具有虚假行为...），null

也是如此

希望对您有所帮助:)

重定向到 ReactJS 中的上一页

Redirect To Previous Page in ReactJS

reactjs

react-router

react-redux

react-router-v4

react-router-dom