MainRouter.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

import { auth } from '../services/firebase';

import {
    Login,
    Home,
    E404,
    Dashboard
} from '../components';

function PrivateRoute({ component: Component, authed, ...rest }) {
    return (
        <Route
            {...rest}
            render={(props) => authed === true
                ? <Component {...props} />
                : <Redirect to={{ pathname: '/', state: { from: props.location } }} />}
        />
    )
}

// function PublicRoute({ component: Component, authed, ...rest }) {
//     return (
//         <Route
//             {...rest}
//             render={(props) => authed === false
//                 ? <Component {...props} />
//                 : <Redirect to='/home' />}
//         />
//     )
// }


class MainRouter extends Component {

    state = { authed: false }

    componentDidMount() {
        this.removeListener = auth.onAuthStateChanged(user => {
            if (user) return this.setState({ authed: true })
            if (!user) return this.setState({ authed: false })
        })
    }

    componentWillUnmount() {
        this.removeListener()
    }

    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path='/' component={Login} />
                    <PrivateRoute exact path='/home' component={Home} authed={this.state.authed}>
                        <Route path="/dashboard" component={Dashboard} />
                    </PrivateRoute>

                    {/* Wildcard */}
                    <Route path='*' component={E404} />
                </Switch>
            </Router>
        );
    }
}

const mapStateToProps = state => {
    const { user } = state.auth;
    return { user };
}

export default connect(mapStateToProps, null)(MainRouter)