Clicking on React NavLink causes error: Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Question

In my React project I have the below NavLinks in my Navbar component:

import { NavLink } from "react-router-dom";
import { Container, Menu } from "semantic-ui-react";

const Navbar = () => (
  <div>
    <Menu fixed="top" inverted>
      <Container>
        <Menu.Item as="a" header>
          React Markdown Blog
        </Menu.Item>
        <NavLink to="/"><Menu.Item as="li">Posts</Menu.Item></NavLink>
        <NavLink to="/create"><Menu.Item as="li">Create a post</Menu.Item></NavLink>
        
      </Container>
    </Menu>
  </div>
);

export default Navbar;

When I try to click on either of them, the requested page not to load and the following error message is displayed in my console :

Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at background.js:20
    at n (background.js:20)
    at background.js:18
    at l (background.js:27)
    at Generator._invoke (background.js:27)
    at Generator.next (background.js:27)
    at n (background.js:49)
    at u (background.js:49)

Does anyone have an idea how this could be resolved or give a clue what the problem is?

For additional context, my App.js file is as follows:

import "semantic-ui-css/semantic.min.css";
import { Router, Route, Switch } from "react-router-dom";
import { createBrowserHistory } from "history";

import Layout from "./containers/Layout";
import PostList from "./containers/PostList";
import PostDetail from "./containers/PostDetail";

import PostCreate from "./containers/PostCreate";
import PostUpdate from "./containers/PostUpdate";
import PostDelete from "./containers/PostDelete";

const history = createBrowserHistory();

function App() {
  return (
    <Router history={history}>
      <Layout>
        <Switch>
          <Route exact path="/" component={PostList} />
          <Route path="/create" component={PostCreate} />
          <Route path="/post/:postSlug" component={PostDetail} />
          <Route path="/post/:postSlug/update" component={PostUpdate} />
          <Route path="/post/:postSlug/delete" component={PostDelete} />
        </Switch>
      </Layout>
    </Router>
  );
}

export default App;

Answer 1

I solved the problem: I installed history via npm install history which installed the latest version (5.0.0). However, in the tutorial I was following, version 4.10.1 was installed. I got the error because of this, as there are some breaking changes between the two versions (see also: https://github.com/ReactTraining/history/issues/804 )

Hence downgrading to version 4.10.1 via npm install history@4.10.1 resolved my issue.