Failed prop type: Invalid prop `component` of type `object` supplied to Route, expected function?

Question

import React, { Component } from "react";
import { withRouter } from 'react-router';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';

import { logout } from '../../store/actions/auth';

class Navbar extends Component {
    render() {
        const { isAuthenticated } = this.props;


//Here I am trying to authenticate a user so once loggedIn the user can 
//manage the phlog using the phlog manager link

        const phlogManagerLink = (
            <div className='nav-link-wrapper'>
                <NavLink exact to='/phlog-manager/' activeClassName='nav-link-active'>
                    <button key='1' className='navbar-links-btn'>
                        <div className='navbar-links-btn-txt'>
                            Phlog Manager
                        </div>
                    </button>
                </NavLink>
            </div>
        );

        const logoutLink = (
            <div className='nav-link-wrapper'>
                <NavLink exact to='/' activeClassName='nav-link-active'>
                    <button key='1' className='navbar-links-btn' onClick={this.props.logout()}>
                        <div className='navbar-links-btn-txt'>
                            Logout
                        </div>
                    </button>
                </NavLink>
            </div>
        );

        return (


                    <div className='phlog-manager-signout-route'>
                        {
                            isAuthenticated ? (logoutLink && phlogManagerLink) : (null)
                        }
                    </div>

                </div>  
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        isAuthenticated: state.auth.token !== null
    };
};

const mapDispatchToProps = dispatch => {
  return {
    logout: () => dispatch(logout())
    // loggedIn: () => dispatch(actions.authCheckState())
  };
};


export default withRouter(
    connect(
        mapStateToProps,
        mapDispatchToProps
    ) (Navbar)
);

The browser console keeps providing the follow warning messages:

checkPropTypes.js:20 Warning: Failed prop type: Invalid prop component of type object supplied to Route, expected function. in Route (created by App) in App in Provider

react-dom.development.js:88 Warning: Cannot update a component (ConnectFunction) while rendering a different component (Navbar). To locate the bad setState() call inside Navbar, follow the stack trace as described in

Answer 1

The component being used for the navigation dealt with authentication, but not login status.