React Router 3 not rendering correct component

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.

where you check for update in props ? how <Router > knows when to re render it self — MJ Sameri
Try changing it to <Route exact path="/" component={AuthenticationComponent(App, {})}> — Boo

MJ Sameri MJ Sameri · Accepted Answer · 2018-06-24T14:55:09

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' />
        }
      }

React Router 3 not rendering correct component

1 Answers