Reactjs 重定向不'；我不能在路由器里工作

所以我尝试在主页上创建一个简单的应用程序，它会将登录表单重定向到仪表板。我在尝试将/仪表板页面设置为私有时遇到了一个问题。代码如下：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {Redirect} from 'react-router-dom'

class DashBoard extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        if (this.props.auth.token) {
            return (
                <h2>Here will be dashboard with items.</h2>
            );
        } else {
            return <Redirect to={{pathname: '/'}} push/>
        }
    }
}

export default connect(
    (state) => {
        return state;
    }
)(DashBoard);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“react router dom”导入{Redirect}
类仪表板扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
if（this.props.auth.token）{
返回(
这里将是仪表板与项目。
);
}否则{
返回
}
}
}
导出默认连接(
（州）=>{
返回状态；
}
)（仪表板）；

问题是url会发生变化，但组件实际上不会呈现自身。那么为什么仪表板中的重定向不起作用呢

编辑：我最终设法从主组件重定向，但对仪表板执行同样的操作仍然不起作用

import React, {Component} from 'react';
import {connect} from 'react-redux';
import * as actions from 'actions';
import {Redirect} from 'react-router-dom';

class Home extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    componentWillReceiveProps(nextProps) {
        console.log('nextProps');
        if (!nextProps.isLoading) {
            if (nextProps.auth.error) {
                console.log('error');
            } else if (nextProps.auth.token) {
                console.log('success');
            } else {
                console.log('something else');
            }
        }
    }

    handleSubmit(e) {
        let {isLoading, auth, dispatch} = this.props
        e.preventDefault();
        let email = this.refs.email.value;
        let password = this.refs.password.value;
        dispatch(actions.login(email, password))
    }
    render() {
        let {isLoading, auth} = this.props;
        let renderLoading = () => {
            if (isLoading) {
                return 'Loading...'
            } else {
                return 'Submit';
            }
        }
        let renderMessage = () => {
            if (auth.error) {
                return <p className="error-message">{auth.error}</p>;
            } else if (auth.token) {
                return <p className="success-message">You have successfully logined in.</p>
            } else {
                return <p></p>
            }
        }
        if (auth.token) {
            return (<Redirect to='/dashboard'/>)
        }
        return (
            <div className="form-container">
                {renderMessage()}
                <form onSubmit={this.handleSubmit}>
                    <div className="field">
                        <label>First Name</label>
                        <input type="text" name="email" placeholder="First Name" ref="email" />
                    </div>
                    <div className="field">
                        <label>Password</label>
                        <input type="text" name="password" placeholder="Last Name" ref="password"/>
                    </div>
                    <button className="form-button" type="submit">{renderLoading()}</button>
                </form>
            </div>
        );
    }
}

export default connect(
    (state) => {
        return state;
    }
)(Home);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“操作”导入*作为操作；
从'react router dom'导入{Redirect}；
类Home扩展组件{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
组件将接收道具（下一步）{
console.log（'nextrops'）；
如果（！nextrops.isLoading）{
if（nextrops.auth.error）{
console.log（'error'）；
}else if（nextrops.auth.token）{
console.log（'success'）；
}否则{
log（“其他东西”）；
}
}
}
handleSubmit（e）{
让{isLoading，auth，dispatch}=this.props
e、 预防默认值（）；
让email=this.refs.email.value；
让password=this.refs.password.value；
发送（操作、登录（电子邮件、密码））
}
render（）{
设{isLoading，auth}=this.props；
让渲染加载=（）=>{
如果（孤岛加载）{
返回“正在加载…”
}否则{
返回“提交”；
}
}
让renderMessage=（）=>{
如果（验证错误）{
返回
{auth.error}
；
}else if（身份验证令牌）{
return
您已成功登录
}否则{
返回

}
}
if（身份验证令牌）{
返回（）
}
返回(
{renderMessage（）}
名字
密码
{renderLoading（）}
);
}
}
导出默认连接(
（州）=>{
返回状态；
}
)（家）；

您是否阅读了位于的Redux集成指南？很可能Redux正在实现shouldComponentUpdate并阻止呈现组件。这是一个你可以使用的技巧

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {Redirect, withRouter} from 'react-router-dom'

class DashBoard extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        if (this.props.auth.token) {
            return (
                <h2>Here will be dashboard with items.</h2>
            );
        } else {
            return <Redirect to={{pathname: '/'}} push/>
        }
    }
}

export default withRouter(connect(
    (state) => {
        return state;
    }
)(DashBoard));

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“react router dom”导入{Redirect，withRouter}
类仪表板扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
if（this.props.auth.token）{
返回(
这里将是仪表板与项目。
);
}否则{
返回
}
}
}
使用路由器导出默认值（连接(
（州）=>{
返回状态；
}
)（仪表板）；

更改浏览器

---

确保您的浏览器正在接受cookies

这对我不起作用。我刚刚发现，在重定向之后，若我查看react-dev工具并打开路由器上下文，我会看到位置是/dashboard，但在浏览器中它会显示localhost:3001。也许这就是问题所在？但是为什么在Home组件中使用相同的代码呢？您是否尝试过在react-redux的connect函数中使用

pure:false

？您可以这样尝试：

connect（null，null，null，{pure:false}）（组件）

。如果该选项为真，则说明该选项的作用。@AndreyLuiz，不幸的是，该选项不起作用。有什么建议说明为什么在home组件上重定向有效而在dashboard上重定向无效？home是否连接到redux？它使用连接功能吗？@AndreyLuiz，是的。我不知道到底发生了什么，但一切都起了作用。有一个问题我没有注意到我做了什么，因为我只是在我的项目上努力。这很奇怪，需要区分。欢迎来到StackOverflow！此答案不提供OP需求的解决方案，请仅在您确定要解释有效答案的情况下回答