reactjs - 重定向在 React Router 中不起作用

Question

所以我试图在主页上使用登录表单制作简单的应用程序，然后重定向到仪表板。尝试将/dashboard 页面设为私有(private)时遇到问题。这是代码:

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

问题是 url 发生了变化，但组件实际上并没有呈现自己。那么为什么在仪表板中重定向不起作用？

编辑:我终于设法从 Home 组件进行重定向，但对仪表板做同样的事情仍然不起作用!

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

Answer 1

您是否阅读过位于 here 的 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));