Reactjs/Redux -- this.props.router undefined

Question

I am building a login system -- when the user fills in the form - I've created a redux action to "authenticate" the user -- so when this.props.authData.isLogged is true -- I want to invoke the navigate function to bounce the user to the home page. However, this.props.router is undefined? But I've defined the withRouter?

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

https://stackoverflow.com/questions/39174814/using-react-router-withrouter — Harkirat Saluja, Aug 30 '17 at 02:45
I tried defining the prop types earlier - it still didn't show up. — The Old County, Aug 30 '17 at 02:51
Possible duplicate of [Programatically Navigate using react router](https://stackoverflow.com/questions/44127739/programatically-navigate-using-react-router) — Shubham Khatri, Aug 30 '17 at 06:01

Ravindra Ranwala · Accepted Answer · 2017-08-30T03:43:38.803

1

Could you please try this out. In React router V4 the API has been changed a lot and browserHistory.push() can not be used as before. Now you get access to history object in your props inside the component. Calling the push method on history object will push a new entry onto the history stack.

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

edited Aug 30 '17 at 03:43

answered Aug 30 '17 at 03:25

Ravindra Ranwala

20,744
6
45
63

Appreciate if you can mark it as the answer, if it was helpful. – Ravindra Ranwala Aug 31 '17 at 03:44

score 0 · Answer 2 · answered Aug 30 '17 at 03:06

0

You can make use of Redirect component like so:

import { Redirect } from 'react-router'

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

answered Aug 30 '17 at 03:06

Amr Aly

3,871
2
16
33

what is react-router version? – Amr Aly Aug 30 '17 at 03:16
"react-router-dom": "^4.2.2", – The Old County Aug 30 '17 at 03:22
for testing purpose in your if statement replace `this.props.authData.isLogged` with `true` and add the `return` keyword to `this.navigate` – Amr Aly Aug 30 '17 at 03:24
1

-- yeah that bounced me to home – The Old County Aug 30 '17 at 03:26
-- I think it was the return this.navigate() -- that caused a reaction – The Old County Aug 30 '17 at 03:27

Reactjs/Redux -- this.props.router undefined

2 Answers2