我试图在用户正确登录时重定向到另一个屏幕,但没有做到这一点......
我更改了我指示的浏览器路径,但是我得到了一个我不理解的控制台错误,因为它出现了
组件......
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"
}
答案 0 :(得分: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')
}
}
答案 1 :(得分:0)
尝试将行this.props.router.push('/prueba')
更改为<Redirect to="/prueba" />
。