Redirect doesn't work in React Router

Question

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

Tyler McGinnis · Accepted Answer · 2017-05-07 16:06:21Z

4

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

answered May 7, 2017 at 16:06

Tyler McGinnis

35.4k16 gold badges75 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Roman Sarder Over a year ago

This doesnt work for me. I just figured out that after redirect if i look into react dev tools and open router context there I see that location is /dashboard but in browser it shows me localhost:3001. May be this is the problem? But why then actually the same code in Home component works?

Andrey Luiz Over a year ago

Have you tried to use pure: false in react-redux's connect function? You can try this way: connect(null, null, null, {pure: false})(Component). The API clarifies what this option does if true.

Roman Sarder Over a year ago

@AndreyLuiz, Unfortunately that didn't work. Any suggestions why redirect on home component works and on dashboard it doesnt?

Andrey Luiz Over a year ago

Are Home connected to redux? Does it uses connect function?

Roman Sarder Over a year ago

@AndreyLuiz, yes it is. I dont know what exactly happened, but all worked. The one problem I didnt notice what I did, cause I just worked towards on my project. That's strange, need to git diff that.

|

armin jahani · Accepted Answer · 2020-08-24 15:11:09Z

-1

change your browser make sure Your browser is accepting cookies

answered Aug 24, 2020 at 15:11

armin jahani

253 bronze badges

1 Comment

xKobalt Over a year ago

Welcome to StackOverflow! This answer does not provide a solution for the OP's needings, please, answer only if you are sure to explain a valid answer

Collectives™ on Stack Overflow

Redirect doesn't work in React Router

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related