Error with redirect route

Question

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

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"
  }

Shubham Khatri · Answer 1 · 2017-11-10T12:26:27.650

1

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

edited Nov 10 '17 at 12:26

answered Nov 10 '17 at 05:50

Shubham Khatri

270,417
55
406
400

I tried with your solution but... i see this error Error: elements are for router configuration only and should not be rendered – jmrosdev Nov 10 '17 at 12:11
Seems you are not using React-router v4. In that case you should make use of the second approach – Shubham Khatri Nov 10 '17 at 12:13
Correct, i use react-router v3. How can I do so that I do not get the error of the image? – jmrosdev Nov 10 '17 at 12:15
Specifying routes inside the components is not available in react-router v3 or below. You can instead route dynamically like `else { this.props.router.push('/prueba') }` . See this answer https://stackoverflow.com/questions/44127739/programatically-navigate-using-react-router/44128108#44128108 – Shubham Khatri Nov 10 '17 at 12:26
With this solution, same error... render() { const {name,email,photo} = this.props.user; if (email) { this.context.router.push('/prueba'); } return (

); } – jmrosdev Nov 10 '17 at 12:56

score 0 · Answer 2 · answered Nov 09 '17 at 18:26

0

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

answered Nov 09 '17 at 18:26

Thomas Hennes

9,023
3
27
36

I tried with your solution but... i see this error Error: elements are for router configuration only and should not be rendered – jmrosdev Nov 10 '17 at 12:12
@jmrosdev Ah yes, I see now that you're using react-router v3. Shubham's answer (in his second code block) should work for v3. Pretty much what you did except since it's a programmatic redirection and not a rendered component, you should not put it within a return statement (which is what you did in your original code). – Thomas Hennes Nov 10 '17 at 12:45

Error with redirect route

EDIT

2 Answers2