无法读取未定义的属性“推送” - 反应错误

Question

单击登录按钮时，我想更改页面，但出现错误：无法读取未定义的属性“推送”。 如何更正代码？

这是我的登录文件：

import React from 'react';
import CreateUser from "./CreateUser";
import GetUser from "./GetUser";
import { BrowserRouter as Router, Link, Route} from 'react-router-dom';
import Routes from "./Routes";

export default class Login extends React.Component { //create Login class and export
  state = { // for hold all the values
    email: '',
    password: '',
  };

  change = e => {
    this.setState({
      [e.target.name]: e.target.value //grab name value and put here
    });
  };

  onSubmit = (e) => {
    e.preventDefault(); //avoid url change because of values
    this.props.onSubmit(this.state);
    this.props.history.push("/GetUser");
    this.setState({
      email: '',
      password: '',
    })
  };

//create a form
  render() {
    return (
      <form>
        <br / /*line breaks*/>
        Login
        <br />
        <br />
        <input
        name="email"
        placeholder='email' //appears in the field to write
        value={this.state.email} //input value
        onChange={e => this.change(e)} //allow change the value by typing
        />
        <br />
        <br />
        <input
        name="password"
        type='password' //hidden password type
        placeholder='password'
        value={this.state.password}
        onChange={e => this.change(e)}
        />
        <br/ >
        <br/ >
        <button onClick={e => this.onSubmit(e)} /*Login button*/>Login</ button>
        <br/ >
        <br/ >
        <button onClick={e => this.onSubmit(e)}/*Sign Up button*/>Sign Up</button>
  </form>
    );
  }
}

这是我的路线文件：

import React from 'react';
import { Router, Route } from 'react-router';
import App from './App';
import Login from './Login';
import CreateUser from './CreateUser';
import GetUser from './GetUser'

const Routes = (props) => (
  <Router {...props}>
    <Route exact path="/GetUser" component={GetUser}/>
    <Route exact path="/CreateUser" component={CreateUser}/>
  </Router>
);

export default Routes;

我是 React 新手，我真的需要帮助。单击按钮后，我想访问 GetUser 文件。

谢谢大家， 爱德华多·格里斯

Answer 1

为了在您的组件中使用history 对象，您需要使用来自react-router-dom 的withRouter HOC。例如：

import React from "react";
import {withRouter} from "react-router-dom";

class Login extends React.Component {
  ...
  onSubmit() {
    ...
    this.props.history.push("/GetUser");
  }
  ...
}
export default withRouter(Login);