Cannot read property 'push' of undefined - React error

Question

I want to change my page when I click the button Login, but appears the error: Cannot read property 'push' of undefined. How to correct the code?

Here is my Login file:

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>
    );
  }
}

Here is my Routes file:

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;

I'm new on React and really need help. I want to acess GetUser file after click the button.

Thx all, Eduardo Gris

You don't have access to history in your onSubmit function. — SherylHohman
– SherylHohman, Commented Dec 24, 2017 at 22:27

Tiago Alves · Accepted Answer · 2017-12-24 21:49:01Z

11

In order to use the history object inside your component, you need to use the withRouter HOC from react-router-dom. For example:

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);

answered Dec 24, 2017 at 21:49

Tiago Alves

2,31617 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eduardo Gris Over a year ago

I changed this way, but now appears: You should not use <Route> or withRouter() outside a <Router>

Tiago Alves Over a year ago

That's because your Login should be inside <Router> on your Routes file. The component that is rendering Login or Login itself should be a Route.

Collectives™ on Stack Overflow

Cannot read property 'push' of undefined - React error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest