使用React Router传递Props时links未定义报错求助

问题重现 #

尝试结合React Router传递Props给导航组件时，持续触发TypeError: Cannot read properties of undefined (reading 'map')，提示links处于未定义状态。

相关代码 #

Header组件（Header.jsx）

export default function Nav({ links }) {
  return (
    <nav className="navbar navbar-expand-lg bg-secondary">
      <div className="container-fluid">
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
          {links.map((link, index) => (
          <li key={index}>{link}</li>
        ))}
          </ul>
        </div>
      </div>
    </nav>
  );
}

Navigation组件（Navigation.jsx）

// Bringing in the required import from 'react-router-dom'
import { Link } from 'react-router-dom';
import Header from './Header';

export default function Nav() {
  // The Navbar UI component will render each of the Link elements in the links prop
  return (
    <Header
      links={[
        <Link key={1} className="nav-link text-light" to="/about">
          Home
        </Link>,
        <Link key={2} className="nav-link text-light" to="/contact">
          About Us
        </Link>,
        <Link key={3} className="nav-link text-light" to="/portfolio">
        Portfolio
      </Link>,
      <Link key={4} className="nav-link text-light" to="/resume">
      Portfolio
    </Link>,
      ]}
    />
  );
}

报错信息 #

TypeError: Cannot read properties of undefined (reading 'map')
    at Nav (http://127.0.0.1:3000/src/components/Header.jsx?t=1701476841986:18:379)
    at renderWithHooks (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:12169:26)
    at mountIndeterminateComponent (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:14919:21)
    at beginWork (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:15900:22)
    at beginWork$1 (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:19747:22)
    at performUnitOfWork (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:19192:20)
    at workLoopSync (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:19131:13)
    at renderRootSync (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:19110:15)
    at recoverFromConcurrentError (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:18730:28)
    at performConcurrentWorkOnRoot (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:18678:30)

问题原因 #

1. 组件命名冲突：Header.jsx中导出的组件名为Nav，Navigation.jsx中导出的组件也叫Nav，极易导致导入混淆——若在根组件中误导入Header.jsx的Nav组件，会因未传递links prop触发报错。
2. 未设置Props默认值：Header组件未对links设置默认值，当组件未收到该Prop时，links为undefined，调用map方法直接抛出错误。

解决方案 #

1. 修正组件命名冲突 #

将Header.jsx中的组件名改为Header，消除命名歧义：

// Header.jsx
export default function Header({ links }) {
  return (
    <nav className="navbar navbar-expand-lg bg-secondary">
      <div className="container-fluid">
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            {links.map((link, index) => (
              <li key={index}>{link}</li>
            ))}
          </ul>
        </div>
      </div>
    </nav>
  );
}

2. 确保根组件渲染正确的导航组件 #

在App.js或根入口文件中，导入并渲染Navigation组件，而非直接渲染Header组件：

// App.js
import Nav from './components/Navigation';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Nav />
      {/* 其他路由组件 */}
    </BrowserRouter>
  );
}

export default App;

3. 为Props添加默认值（可选但推荐） #

给Header组件的links设置默认空数组，避免未传参时触发报错：

// Header.jsx
export default function Header({ links = [] }) {
  return (
    <nav className="navbar navbar-expand-lg bg-secondary">
      <div className="container-fluid">
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            {links.map((link, index) => (
              <li key={index}>{link}</li>
            ))}
          </ul>
        </div>
      </div>
    </nav>
  );
}

额外优化 #

修正Navigation组件中重复的Link文本，让路径与文本对应：

<Link key={4} className="nav-link text-light" to="/resume">
  Resume
</Link>

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