reactjs - react 路由器类型错误 : Cannot read property 'state' of undefined

Question

我正在用 react 和 redux 制作一个基本的路由应用程序，当我想重定向到引用者时出现错误。
错误发生在行中:

    this.referrer =  props.location.state.referrer || "/";

这是我的登录组件。

import React, { Component, createRef } from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import axios from "axios";

import { updateAuthTokens, updateLoggedin } from "./redux/actions/actions";

class Login extends Component {
  constructor(props) {
    super(props);
    this.idRef = createRef();
    this.pwdRef = createRef();
    this.state = {
      isLoggedIn: false,
      isError: false,
      identifier: "",
      password: "",
    };
    this.postLogin = this.postLogin.bind(this);
    this.referrer =  props.location.state.referrer || "/";
  }

  postLogin(e) {
    e.preventDefault();
    const identifier = this.idRef.current.value;
    const password = this.pwdRef.current.value;
    axios
      .post(process.env.REACT_APP_BASE_URL + "/auth/local", {
        identifier,
        password,
      })
      .then((result) => {
        if (result.status === 200) {
          this.props.ul(true);
          this.props.uat(result.jwt);
          this.setState({ isLoggedIn: true });
        } else {
          this.setState({ isError: true });
        }
      })
      .catch((e) => {
        this.setState({ isError: true });
      });
  }

  render() {
    if (this.state.isLoggedIn) {
      return <Redirect to={this.referrer} />;
    } else {
      return (
        <div>
          <form>
            <input type="username" ref={this.idRef} placeholder="email" />
            <input type="password" ref={this.pwdRef} placeholder="password" />
            <button onClick={this.postLogin}>Sign In</button>
          </form>
          {this.state.isError && (
            <p>The username or password provided were incorrect!</p>
          )}
        </div>
      );
    }
  }
}
const mapStateToProps = (state) => {
  return {
    isLoggedIn: state.isLoggedIn,
  };
};
const mapDispatchToProps = {
  ul: updateLoggedin,
  uat: updateAuthTokens,
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);

重定向从此组件发生:

import React from "react";
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";

class PrivateRoute extends React.Component {
  render() {
    const { isLoggedIn, children, ...rest } = this.props;
    if (isLoggedIn) {
      return <Route {...rest}>{children}</Route>;
    } else {
      return (
        <Redirect
          to={{
            pathname: "/login",
            state: { referrer: this.props.location }
          }}
        />
      );
    }
  }
}
const mapStateToProps = (state) => {
  return {
    isLoggedIn: state.isLoggedIn,
  };
};
export default connect(mapStateToProps, null)(PrivateRoute);

我的路线在这里:

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import { connect } from "react-redux";

import Home from "./Home";
import Admin from "./Admin";
import Members from "./Members";

import Login from "./Login";
import PrivateRoute from "./PrivateRoute";

import "./App.css";

class App extends Component {
  render() {
    return (
      <Router><div>
        <ul>
          <li>
            <Link to="/">Home Page</Link>
          </li>
          <li>
            <Link to="/members">Members</Link>
          </li>
          <li>
            <Link to="/admin">Admin</Link>
          </li>
        </ul>
      </div>
        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route exact path="/">
            <Home />
          </Route>
          <PrivateRoute path="/members">
            <Members />
          </PrivateRoute>
          <PrivateRoute path="/admin">
            <Admin />
          </PrivateRoute>
        </Switch>
      </Router>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    isLoggedIn: state.isLoggedIn,
  };
};
export default connect(mapStateToProps, null)(App);

我一直无法让它工作，不得不将其注释掉，这意味着我总是在主页而不是我的预期位置中结束。
任何帮助/见解将不胜感激。

Answer 1

用于在 Prop 更改时访问位置:

       <Route path="/login">
            <Login />
       </Route>
       <Route exact path="/">
            <Home />
       </Route>
       <PrivateRoute path="/members">
            <Members />
       </PrivateRoute>
       <PrivateRoute path="/admin">
            <Admin />
       </PrivateRoute>

到

       <Route path="/login" component={Login} />
       <Route exact path="/" component={Home} />
       <PrivateRoute path="/members" component={Members} />
       <PrivateRoute path="/admin" component={Admin} />

你不会总是重定向所以改变:

    this.referrer =  props.location.state.referrer || "/";

到

    this.referrer = props.location.state ? props.location.state.referrer : "/";