Question

在我的 React 项目中，我的导航栏组件中有以下导航链接：

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 安装了历史记录。但是，在我遵循的教程中，安装了 4.10.1 版。我因此收到错误消息，因为两个版本之间存在一些重大更改（另请参阅：https://github.com/ReactTraining/history/issues/804）

因此通过 npm install history@4.10.1 降级到 4.10.1 版解决了我的问题。

单击 React NavLink 会导致错误：Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

1 个答案: