history.push() updates URL in browser but does not renders the appropriate component(Redirect not working too)

Question

I am using react-router in my project and using this.props.history.push() inside componentDidMount() if the user is not looged in ,then redirect him to Login component. This is my code in App.js:


class App extends React.Component{

    constructor(props){
        super(props);
        
    }   
    
    componentDidMount(){
        
        firebase.auth().onAuthStateChanged((user)=>{
            if(user){
                this.props.dispatch(login(user.email)); 
            }
            else{
                
                this.props.history.push('/login');
            }
        })
    }
        render(){
        //console.log(this.props.isLoggedIn);
        return (<div className="App">
            <Switch>
                <Route path="/" component={()=><Homepage userName={this.props.username} logout={this.logout}/>} />
                <Route path="/login" component={Login} />
            </Switch>
        </div>);}
}


export default withRouter(connect(mapStateToProps)(App));

Below is my index.js code:

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';

const store= createStore(combineReducers({userState: userState}),applyMiddleware(logger));


ReactDOM.render(
    
        <Provider store={store}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
    ,
    document.getElementById('root')
);

Please not that I have removed some unnecessary functions and imports irrelevent to the context of this question.

Now let us come to what I have tried till now:

Using Router instead of BrowserRouter with history object passed to it.
Tried removing switch but that didn't work too.

I also searched for other questions that address this problem but unfortunately, none of them worked for me.

Please help me to find if there is any issue in my code.

Thank You!!

EDIT:

Looks like I'm having a bad day, even Redirect isn't working for me! I'm trying very hard but I don't understand why Login component is not being rendered even when the URL is being changed.

You aren't using exact path for your Switch's Route. The switch will hit your `/` path first. Try swapping that line with the `/login` line — Halmon, Nov 01 '20 at 04:23
Nothing is working for me! Even if I am using Redurect, even that is not able to render Login component. — Jonty Tyagi, Nov 01 '20 at 04:50
@JontyTyagi I've mimic your code and ran it using exact path for Switch route, it is working as expected. Here is the link https://stackblitz.com/edit/react-ep89cj?file=src/App.js — Varun Arya, Nov 01 '20 at 05:02
I think problem is something else. I tried replacing Login with some other simpler functional component and even that isn't working — Jonty Tyagi, Nov 01 '20 at 05:05
I am using 'react-router-dom' v5.2. Is that something which is causing problem? — Jonty Tyagi, Nov 01 '20 at 05:07
try using render prop instead of component prop for rendering the ``. I have added this in my answer — Subrato Pattanaik, Nov 01 '20 at 05:09

score 3 · Answer 1 · answered Nov 01 '20 at 04:24

3

You need to use exact prop in your Route. Otherwise, /login will also match / first

            <Route exact path="/" component={()=><Homepage userName={this.props.username} logout={this.logout}/>} />
            <Route exact path="/login" component={Login} />

answered Nov 01 '20 at 04:24

Sohaib

10,941
9
32
34

1

This is now showing cannot read property push of undefined in this.props.history – Jonty Tyagi Nov 01 '20 at 04:47
Can you paste your entire code to CodeSandbox or StackBlitz, so we could take a look – Sohaib Nov 01 '20 at 05:12
hmm... hard to help out in that case. Maybe try using `window.history.push` instead – Sohaib Nov 01 '20 at 05:19
I could have given you my entire code, but it is using lots of other files and tools as well. It would be almost impossible to recreate the problem. – Jonty Tyagi Nov 01 '20 at 05:20

Subrato Pattanaik · Answer 2 · 2020-11-01T04:59:29.447

It seems like you didn't use exact in your Route component. If you don't use exact then react will route to / path first. It will reads the path(/login) as / + login. If you provide exact to this / path then react will route to the specified component which exactly matches the path. It is not necessary to provide an exact to all the Route component.

It is necessary when:

For example,

<Route exact path="/" component={About} />
<Route path="/login" component={Login} />

Then you need to provide the exact to parent path.

<Route exact path="/login" component={Login} />
<Route path="/login/profile" component={Profile} />

In short, if your next Route component path is a child of the previous path then you need to provide the exact property to the parent path.

Edited: There is one more thing that I'd like to say that in your Route component of / path you must have a render prop instead of a component prop for rendering the Callback component like this.

<Route exact path="/" render={()=><Homepage userName={this.props.username} logout={this.logout}/>} />

Some credits to @Sohaib answer. I have added some more explanation to his answer.

https://stackoverflow.com/a/53936972/13847690 this might help with the differences. Read case 3 and case 4 in that answer. — Subrato Pattanaik, Nov 01 '20 at 05:24
Thank You everyone guys, for giving your time, but I think I might look for some alternative of react router. No matter what I am doing, it is not working right. — Jonty Tyagi, Nov 01 '20 at 05:30

history.push() updates URL in browser but does not renders the appropriate component(Redirect not working too)

2 Answers2