Redirect doesn't work in React Router

react-router, reactjs, redirect, redux

Solution

Have you read the Redux integration guide located here? Odds are Redux is implementing shouldComponentUpdate and preventing your components from being rendered. Here's a trick you can use,

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

Problem

So I am trying to make simple app with login form on the home page, which redirects then to dashboard. I faced a problem when trying to make /dashboard page private. Here is the code: ``` 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); ``` The problem is that url changes, but component does not actually render itself. So why redirect in dashboard doesnt work? EDIT: I finally managed to make a redirect from Home component, but doing the same for dashboard still doesnt work! ``` 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); ```

Original source