重定向在React路由器中不起作用

Question

所以我想用主页上的登录表单做一个简单的应用程序，然后重定向到仪表板。在试图制作/仪表盘页面时，我遇到了一个问题。这里是代码：

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更改，但组件实际上并没有呈现自己。那么为什么仪表板中的重定向不起作用？

编辑：我终于设法从家庭组件做出重定向，但对仪表板仍然不起作用！

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