Reactjs/Redux - this.props.router undefined

Question

Ich baue ein Login-System - wenn der Benutzer das Formular ausfüllt - Ich habe eine Redux-Aktion erstellt, um den Benutzer zu "authentifizieren" - also wenn this.props .authData.isLogged ist wahr - Ich möchte die Navigationsfunktion aufrufen, um den Benutzer auf die Homepage zu verweisen. This.props.router ist jedoch nicht definiert? Aber ich habe den withRouter definiert?

import React, { Component } from 'react' 
//import { render } from 'react-dom' 
//import { withRouter } from 'react-router-dom' 
import { withRouter } from 'react-router'; 

// components 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { fetchAuthentication } from '../../actions/authAction'; 

import LoginSyncValidationForm from './LoginSyncValidationForm' 


// this is a class because it needs state 
class Login extends Component { 

    constructor(props, context) { 
    super(props, context); 
    this.submit = this.submit.bind(this); 
    } 

    componentDidMount() {  
    // console.log('this', this) 
    } 

    submit (data) { 
    this.props.fetchAuthentication(data); 
    } 

    navigate() { 
    console.log("navigate", this) 
    //this.props.router.push('/home'); 
    } 

    render() { 
    console.log(this.props.authData) 

    if(this.props.authData.isLogged){ 
     this.navigate(); 
    } 

    return (
     <div className="Page"> 
     <h2>Login</h2> 
     <LoginSyncValidationForm onSubmit={this.submit} /> 
     </div> 
    ) 
    } 
} 


function mapStateToProps(state) { 
    return { 
    authData: state.auth 
    }; 
} 

function mapDispatchToProps(dispatch) { 
return bindActionCreators({ fetchAuthentication }, dispatch); 
} 


const {object} = React.PropTypes 
Login.propTypes = { 
    router: object 
} 
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login)) 

Answer 1

Könnten Sie bitte diese ausprobieren. In React Router V4 wurde die API stark verändert und browserHistory.push() kann nicht wie bisher verwendet werden. Jetzt erhalten Sie Zugriff auf das History-Objekt in Ihren Requisiten innerhalb der Komponente. Durch den Aufruf der Push-Methode für das Verlaufsobjekt wird ein neuer Eintrag in den Verlaufsstapel verschoben.

navigate() { 
    this.props.history.push('/home'); 
    } 

Answer 2

Sie können wie so Verwendung von Redirect Komponente machen:

import { Redirect } from 'react-router' 

... 
navigate() { 
    return <Redirect to="/home" /> 
}