TypeError: this.props.history is not a function inside Navigation shared component

Question

I have the following navigation component

import React, { Component } from "react";
import { NavLink, withRouter } from "react-router-dom";
import swal from "sweetalert";

import CollectionsDropdown from "./CollectionsDropdown";
import Logo from "../../../images/logo.png";

import AuthService from "../../Auth/AuthService";
const Auth = new AuthService();

class Navigation extends Component {
  state = {
    toggle: false,
    categorys: []
  };

  Toggle = () => {
    this.setState({ toggle: !this.state.toggle });
  };

  handleLogout(props) {
    Auth.logout();
    swal({
      title: "Logged out",
      text: "You have successfully logged out",
      icon: "success",
      buttons: true
    });
    this.props.history("/");
  }

  render() {
    return (
      <>
        <nav className='flex items-center justify-between flex-wrap text-gray-800 bg-white p-6 border-b md:block md:justify-start md:text-center'>
          <div className='text-white lg:mb-2'>
            <NavLink to='/'>
              <img
                src={Logo}
                className='h-8 md:h-16 object-cover m-auto md:pl-4'
                alt='logo'
              />
            </NavLink>
          </div>

          <div className='block md:hidden'>
            <button
              className='flex items-center px-3 py-2 border rounded text-gray-800 border-gray-800'
              onClick={this.Toggle}
            >
              <svg
                className='fill-current h-3 w-3'
                viewBox='0 0 20 20'
                xmlns='http://www.w3.org/2000/svg'
              >
                <title>Menu</title>
                <path d='M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z' />
              </svg>
            </button>
          </div>

          <div
            className={
              this.state.toggle
                ? "w-full block"
                : "md:flex md:items-center md:w-auto hidden"
            }
          >
            <div className='text-sm md:flex-grow'>
              {Auth.loggedIn() ? (
                <>
                  <NavLink
                    to='/dashboard/collections/create'
                    className='nav-link transition-all ease-out transition-small'
                    activeClassName='active'
                  >
                    Create a collection (WIP)
                  </NavLink>
                  <NavLink
                    to='/dashboard/journals/create'
                    className='nav-link transition-all ease-out transition-small'
                    activeClassName='active'
                  >
                    Create a journal
                  </NavLink>
                  <button
                    type='button'
                    className='btn'
                    onClick={this.handleLogout.bind(this)}
                  >
                    Logout
                  </button>
                </>
              ) : (
                <>
                  <NavLink
                    to='/about'
                    className='nav-link transition-all ease-out transition-small'
                    activeClassName='active'
                  >
                    About me
                  </NavLink>
                  <CollectionsDropdown />
                  <NavLink
                    to='/journals'
                    className='nav-link transition-all ease-out transition-small'
                    activeClassName='active'
                  >
                    Journals
                  </NavLink>
                  <NavLink
                    to='/contact'
                    className='nav-link transition-all ease-out transition-small'
                    activeClassName='active'
                  >
                    Contact me
                  </NavLink>
                </>
              )}
            </div>
          </div>
        </nav>
      </>
    );
  }
}

export default withRouter(Navigation);

and the following app.js

import React, { Component } from "react";
import { Route, Switch, withRouter } from "react-router-dom";

// App imports
import Navigation from "./components/shared/Navigation/Navigation";
import Footer from "./components/shared/Footer";

import PageNotFound from "./components/PageNotFound";

import About from "./components/About";
import Contact from "./components/Contact";

import Collections from "./components/Collections/landing";
import CollectionShow from "./components/Collections/show";
import CollectionCreate from "./components/Dashboard/Collections/create";
import CollectionsEdit from "./components/Dashboard/Collections/edit";

import Journals from "./components/Journals/landing";
import JournalShow from "./components/Journals/show";
import JournalCreate from "./components/Dashboard/Journals/create";
import JournalEdit from "./components/Dashboard/Journals/edit";

// Auth
import Register from "./components/Auth/Register";
import Login from "./components/Auth/Login";

class App extends Component {
  render() {
    return (
      <>
        <Navigation />

        <div className='flex-1'>
          <Switch>
            <Route exact path='/about' component={About} />
            <Route exact path='/contact' component={Contact} />

            <Route exact path='/collections' component={Collections} />
            <Route exact path='/collections/:id' component={CollectionShow} />

            <Route
              exact
              path='/dashboard/collections/create'
              component={CollectionCreate}
            />
            <Route
              exact
              path='/dashboard/collections/:id/edit'
              component={CollectionsEdit}
            />

            <Route exact path='/journals' component={Journals} />
            <Route exact path='/journals/:id' component={JournalShow} />

            <Route
              exact
              path='/dashboard/journals/create'
              component={JournalCreate}
            />
            <Route
              exact
              path='/dashboard/journals/:id/edit'
              component={JournalEdit}
            />

            <Route exact path='/auth/register' component={Register} />
            <Route exact path='/auth/login' component={Login} />

            <Route path='*' component={PageNotFound} />
          </Switch>
        </div>

        <Footer />
      </>
    );
  }
}

export default withRouter(App);

I'm trying to redirect the user to the homepage after logging out but I'm getting the TypeError (in the title)

I haven't done much with react-router-dom so not too sure where I'm going wrong here.

The navigation is a nested component so I'm hoping there's a way just to pass in the props without too much hassle.

So any help would be great.

Answer 1

I believe you've forgotten to use 'push'

So instead of

this.props.history("/") 

use

this.props.history.push("/")

Answer 2

Please use withRouter while exporting Navigation. It should work.