CODEWITHSUNDEEP
reactjsreact-routerreact-redux
jmrosdev
jmrosdev

Reputation: 123

Error with redirect route

I am trying to make that when the user login correctly redirects to another screen but does not do it all right...

I change the browser path to which I indicate but I get an error by console that I do not understand because it appears

Image with error

The component...

import React, { Component } from "react";
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Redirect } from 'react-router';
import Header from '../components/Header/Header.jsx';

import { fetchCompanies } from '../actions/index';
import { loginUserGoogle } from '../actions/login';

class Home extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.fetchCompanies();
  }

  renderUser () {
    const {name,email,photo}  = this.props.user;
    if (!email) {
      return (
        <h1>User not logged </h1>
      );
    } else {
      return (
        this.props.router.push('/prueba')
      );
    }
  }

  render() {
    return (
      <div className="page-home">
        <Header />
        <button onClick={() => this.props.loginUserGoogle()}>LOGIN GOOGLE</button>
        {this.renderUser()}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    user: state.userInfo
  }
}

export default connect(mapStateToProps, {fetchCompanies, loginUserGoogle})(Home);

As you can see in the photo, change to the new window but the error comes out by console. How could I solve it?

EDIT

I use react-router v3

"dependencies": {
"antd": "^2.13.8",
"babel-preset-stage-1": "^6.24.1",
"firebase": "^4.6.1",
"lodash": "^4.17.4",
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.1",
"react-router-bootstrap": "^0.23.1",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"redux-form": "^6.4.3",
"redux-saga": "^0.14.3",
"redux-thunk": "^2.2.0"


},
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-import": "^1.6.2",
    "babel-polyfill": "^6.20.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.17.0",
    "babel-runtime": "^6.20.0",
    "clean-webpack-plugin": "^0.1.15",
    "css-loader": "^0.26.1",
    "enzyme": "^2.7.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "ignore-styles": "^5.0.1",
    "mocha": "^3.2.0",
    "node-sass": "^4.3.0",
    "react-addons-test-utils": "^15.4.2",
    "react-hot-loader": "^1.3.1",
    "redux-freeze": "^0.1.5",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "whatwg-fetch": "^2.0.1"
  }

Upvotes: 0

Views: 1042

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281902

You are rendering the the elements returned by renderUser function and hence you shouldn't call the router.push() function in the return statement. You can either return Redirect element if you are using react-router v4 like

renderUser () {
    const {name,email,photo}  = this.props.user;
    if (!email) {
      return (
        <h1>User not logged </h1>
      );
    } else {
      return (
        <Redirect to='/prueba' />
      );
    }
  }

or just call the function like

renderUser () {
    const {name,email,photo}  = this.props.user;
    if (!email) {
      return (
        <h1>User not logged </h1>
      );
    } else {
        this.props.router.push('/prueba')
    }
  }

Upvotes: 1

Thomas Hennes
Thomas Hennes

Reputation: 9979

Try changing the line this.props.router.push('/prueba') to <Redirect to="/prueba" />.

Upvotes: 0

Related Questions