反应：TypeError 无法读取未定义的属性（读取“推送”）

Question

我正在尝试创建一个具有登录功能的应用程序。 我希望它的工作方式是，一旦验证登录，程序会自动将用户重定向到主页。 现在我有这个代码：

应用程序.js：

function App() {
  
  return (
    <React.Fragment>
      <div className="content">
       <BrowserRouter> 
        <Routes>
          <Route element={<LoginForm />} path="/login" />
          <Route path="/test" element={<BasicExample />} />
        </Routes>
        </BrowserRouter>
      </div>
    </React.Fragment>
  );
}

export default App;

登录

class LoginForm extends FForm {
  // create a ref object
  state = {
    data: { username: "", password: "" },
    errors: {},
  };

  handleSubmit = event => {
    event.preventDefault();
    const { email, password } = this.state;
    // console.log(this.state);
    console.log('logging')
    axios
      .post(
        "http://127.0.0.1:8000/auth/",
        {
          username: email,
          password: password
        }
        // { withCredentials: true }
      )
      .then(res => {
        console.log('got it')
        console.log(res);
        window.localStorage.setItem("token", res.data.token);
        
        
       
        
        console.log('pushing')
        this.props.history.push('/test', { state: "sample data" })
        // return <Redirect to="/home" />;
      })
      .catch(err => {
        console.log('NOOOOO eror')
        console.log(err);
      });
  } 

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <h1>welcome to log in!</h1>
          <br />
          <input
            type="text"
            name="email"
            placeholder="Username"
            defaultValue={this.state.email}
            onChange={e => {
              this.setState({ email: e.target.value });
            }}
          />
          <br />
          <br />
          <input
            type="password"
            name="password"
            placeholder="Password"
            defaultValue={this.state.password}
            onChange={e => {
              this.setState({ password: e.target.value });
            }}
          />
          <br />
          <br />
          <button type="submit"> Login </button>
        </form>
      </div>
    );
  } 
}

export default LoginForm;

代码输出TypeError : cannot read properties of undefined (reading 'push')。 我假设历史没有初始化。 我应该在哪里/如何初始化历史？

Answer 1

对于 react-router 6 继续使用元素，但使用 HOC

好的，react-router 6 改变了他们做事的方式，只使用元素，但你必须自己传递道具，如果你使用的是基于 class 的组件，那么你需要使用 HOC）

const LoginComponentWithHistory = (props) => <LoginForm {...props} history={useHistory()}/>

// route

<Route element={<LoginFormWithHistory/>} path="/login" />

查看相关有趣的 github convo: https://github.com/remix-run/react-router/issues/8146

适用于 react-router 5

这需要作为component传递

<Route component={LoginForm} path="/login" />

当您将它作为component传递时， react-router 会为您传递所有道具（包括历史记录）

Answer 2

尝试从 React Router 使用 HOC 导出LoginForm

export default withRouter(LoginForm);