單擊 React NavLink 會導致錯誤：Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Question

在我的 React 項目中，我的 Navbar 組件中有以下 NavLinks：

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;

當我嘗試單擊其中任何一個時，請求的頁面不會加載，並且我的控制台中會顯示以下錯誤消息：

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)

有沒有人知道如何解決這個問題或提供線索是什么問題？

對於其他上下文，我的 App.js 文件如下：

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

我解決了這個問題：我通過安裝了最新版本（5.0.0）的npm install history安裝了npm install history 。 但是，在我遵循的教程中，安裝了 4.10.1 版。 我因此收到錯誤消息，因為兩個版本之間存在一些重大更改（另請參閱： https : //github.com/ReactTraining/history/issues/804 ）

因此，通過npm install history@4.10.1降級到 4.10.1 版解決了我的問題。