点击React NavLink报错：Uncaught (in promise) TypeError: undefined is not iterable

问题排查方向与解决方案 #

1. 先排除浏览器插件干扰

你当前报错栈指向background.js，这是浏览器扩展的执行文件，非项目代码抛出的错误。先禁用所有浏览器扩展（尤其是广告拦截、爬虫类、React调试类扩展）后重试，确认是否有项目本身的报错浮出水面，避免插件错误掩盖真实问题。

2. 修正NavLink与Semantic UI Menu.Item的嵌套写法

你当前的写法是把Menu.Item嵌套在NavLink内部，会导致标签语义错误（a标签内套li）、点击事件冲突，正确用法是直接把NavLink作为Menu.Item的as属性传入，同时保留路由参数：

// Navbar组件修正后代码
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>
        {/* 修正写法 */}
        <Menu.Item as={NavLink} to="/">Posts</Menu.Item>
        <Menu.Item as={NavLink} to="/create">Create a post</Menu.Item>
      </Container>
    </Menu>
  </div>
);

export default Navbar;

3. 校验react-router-dom与history包的版本兼容性

这个报错很大概率是版本不匹配导致：

• 如果你用的是react-router-dom@5.x版本：要求history包版本必须是v4/v5，如果你安装了history@6.x会直接触发兼容性错误，执行npm i history@5回退版本即可。
• 如果你用的是react-router-dom@6.x版本：已经不再支持自定义history传入Router的写法，且Switch、component属性都已废弃，需要修改App.js代码如下：

// react-router-dom@6.x 版本App.js修正后代码
import "semantic-ui-css/semantic.min.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

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

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

export default App;

内容的提问来源于stack exchange，提问作者Daniel