Redirect funktioniert nicht in React Router

Question

So versuche ich einfache App mit Login-Formular auf der Homepage zu machen, die dann zum Dashboard umleitet. Ich hatte ein Problem, als ich versuchte, die Dashboard-Seite privat zu machen. Hier ist der Code:

Das Problem ist, dass URL ändert, aber Komponente selbst nicht selbst rendern. Warum also Redirect im Dashboard funktioniert nicht?

EDIT: Ich habe endlich geschafft, eine Umleitung von Home-Komponente zu machen, aber das gleiche für das Armaturenbrett tut noch nicht funktioniert!

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

Haben Sie auch die Integration Guide Redux here liegt Odds sind Redux implementiert sollteComponentUpdate und verhindert, dass Ihre Komponenten gerendert werden. Hier ist ein Trick, den Sie verwenden können,

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