Question

我试图在用户正确登录时重定向到另一个屏幕，但没有做到这一点......

我更改了我指示的浏览器路径，但是我得到了一个我不理解的控制台错误，因为它出现了

组件......

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

正如您在照片中看到的那样，请切换到新窗口，但错误是由控制台发出的。我怎么能解决它？

修改

我使用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"
  }

Answer 1

您正在渲染renderUser函数返回的元素，因此您不应该在return语句中调用router.push()函数。如果您使用Redirect

，则可以返回react-router v4元素

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

或只是调用函数

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

Answer 2

尝试将行this.props.router.push('/prueba')更改为<Redirect to="/prueba" />。

重定向路由出错

修改

2 个答案: