Redirect to user page after login in with react-redux

Question

I'm trying to redirect to user page after login. This is my code:

import React, {PropTypes} from 'react';
import styles from '../styles/login.scss';
import { connect } from 'react-redux';
import { checkLogin } from './../actions/login.action';

class Login extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        username: '',
        password: ''
    };
    this.handleChangeUsername = this.handleChangeUsername.bind(this);
    this.handleChangePassword = this.handleChangePassword.bind(this);
}

componentWillReceiveProps(nextProps) {
    if (nextProps.wasSuccessful !== this.props.wasSuccessful) {
        this.redirectToUserPage(nextProps.wasSuccessful);
    }
}

redirectToUserPage = () => {
    if (this.props.wasSuccessful) {
        window.location.href = 'localhost:3000/filterableTable';
    }
};

login =() =>  {
    this.props.dispatch(checkLogin(this.state));
};
handleChangeUsername(event) {
    this.setState({username: event.target.value});
}
handleChangePassword(event) {
    this.setState({password: event.target.value});
}
render() {
    console.log('----', this.props.wasSuccessful);
    return (
  <div className={styles.loginForm}>
    <h3>Welcome</h3>
    <div className={styles.container}>
      <label><b>Username</b></label>
      <input type="text" value={this.state.username} onChange={this.handleChangeUsername} name="username" placeholder="Username" required></input>

      <label><b>Password</b></label>
      <input type="password" value={this.state.password} onChange={this.handleChangePassword} name="password" placeholder="Password" required></input>
      <input type="submit"  value="Login" onClick={this.login}></input>
    </div>
  </div>
);
}
}

Login.propTypes = {
    login: PropTypes.func.isRequired,
    dispatch: PropTypes.func.isRequired,
    wasSuccessful: PropTypes.boolean,
};

export default connect((state) => ({
     wasSuccessful: state.login.wasSuccessful
}))(Login);

On wasSuccessful the state changess to True, so when i press login, i should be able to redirect to user page.

  componentWillReceiveProps(nextProps) {
       if (nextProps.wasSuccessful !== this.props.wasSuccessful) {
              this.redirectToUserPage(nextProps.wasSuccessful);
       }
  }

I understood that this will be called when the state is changed, so in here i call the function redirectToUserPage.

  redirectToUserPage = () => {
      if (this.props.wasSuccessful) {
          window.location.href = 'localhost:3000/filterableTable';
      }
 };

I tryed like this, but it doesn't work. Please, help~

Assuming you are using react-router, See this https://stackoverflow.com/questions/44127739/programatically-navigate-using-react-router/44128108#44128108 — Shubham Khatri, Aug 02 '17 at 09:23

score 0 · Answer 1 · answered Aug 02 '17 at 10:04

0

I suggest hashHistory from my experience,

import {hashHistory} from 'react-router'

  redirectToUserPage = () => {
      if (this.props.wasSuccessful) {
          hashHistory.push('#/filterableTable');
      }
 };

answered Aug 02 '17 at 10:04

Chaitanya Mankala

1,318
11
21

score 0 · Answer 2 · answered Mar 09 '19 at 02:51

I'm pretty sure you're getting a console error (something like "cannot access wasSuccessful of undefined") because of this.props.wasSuccessful inside redirectToUserPage. You're not binding this to redirectToUserPage function in constructor. The scope of this has changed from that of Login class to redirectToUserPage's. The this inside that function doesnt have props.

Redirect to user page after login in with react-redux

2 Answers2