React Router 3 not rendering correct component - reactjs

Question

I have a component I am using for authentication, if a user is not authenticated I want to push them to the login page.
A basic example of the setup is...
Auth Component
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { auth } from '../../firebase';
import { replace } from 'react-router-redux';
export default (WrappedComponent, {}) => {
class Authentication extends Component {
componentWillMount() {
auth.onAuthStateChanged(user => {
if (user) {
// User is signed in.
console.log('USER IS SIGNED IN');
} else {
// No user is signed in.
console.log('USER IS NOT SIGNED IN');
this.props.dispatch(replace('login'));
}
});
}
render() {
return <WrappedComponent>{this.props.children}</WrappedComponent>;
}
}
return connect(
null,
null
)(Authentication);
};
Routes
import React from 'react';
import Loadable from 'react-loadable';
import { Router, Route, IndexRoute } from 'react-router';
import AuthenticationComponent from './containers/Authentication';
import App from './components/App';
const AsyncRoute = loader =>
Loadable({
loader,
loading: () => <h3>Loading...</h3>,
delay: 300,
});
const LandingPage = AsyncRoute(() =>
import(/* webpackPrefetch: true, webpackChunkName: "landingPage" */ './containers/LandingPage')
);
const Login = AsyncRoute(() =>
import(/* webpackPrefetch: true, webpackChunkName: "login" */ './containers/Login')
);
const NotYetImplemented = () => <h6>Not Yet Implemented...</h6>;
export default ({ history }) => (
<Router history={history}>
<Route path="/" component={AuthenticationComponent(App, {})}>
<IndexRoute component={LandingPage} />
</Route>
<Route path="/login" component={Login} />
</Router>
);
Currently, when Firebase reports the user is not authenticated, the route is updated and shows as http://localhost:3001/login however the LandingPage component is rendered.
If I refresh the page on /login I do then get the correct component.
I have swapped out replace for push but had the same result.

Answer 1

like #Boo said you have to use exact or you can use switch and Route instead like this
import { Switch, Route} from 'react-router-dom'
<Switch>
<Route path='/' component={ HomePage } exact />
<Route path='/login' component={ LogIn } exact />
</Switch>
and using
Redirect
you can do something like this (the code below) instead of dispatching action in redux and this will work for sure
import { Redirect } from 'react-router'
export default (WrappedComponent, {}) => {
class Authentication extends Component {
state = { redirect : false }
componentWillMount() {
auth.onAuthStateChanged(user => {
if (user) {
// User is signed in.
console.log('USER IS SIGNED IN');
} else {
// No user is signed in.
console.log('USER IS NOT SIGNED IN');
//this.props.dispatch(replace('login'));
this.setState({redirect : true})
}
});
}
render() {
const {redirect } = this.state
if(!redirect){
return <WrappedComponent>{this.props.children}</WrappedComponent>;
} else {
return <Redirect to='where ever you want' />
}
}