我具有以下导航组件

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);

和以下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);

注销后，我试图将用户重定向到首页，但出现TypeError（标题中）

我对react-router-dom并没有做太多事情，所以不太确定我在哪里出错了。

导航是一个嵌套的组件，所以我希望有一种方法可以轻松传递道具。

因此，任何帮助都会很棒。