Kann die Eigenschaft 'push' von undefined nicht lesen - Fehler melden

Question

Ich möchte meine Seite ändern, wenn ich auf die Schaltfläche Anmelden klicke, aber der Fehler erscheint: Eigenschaft 'push' von undefined kann nicht gelesen werden. Wie wird der Code korrigiert?

Hier ist meine Anmeldung Datei:

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

Hier ist meine Routen-Datei:

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; 

ich auf React bin neu und wirklich Hilfe brauchen. Ich möchte auf die GetUser-Datei zugreifen, nachdem ich auf die Schaltfläche geklickt habe.

Thx alle, Eduardo Gris

Answer 1

Um die history Objekt in Ihrer Komponente zu verwenden, müssen Sie die withRouter HOC von react-router-dom verwenden. Zum Beispiel:

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