尝试使用 React Router 在 React 中传递 props - 说该值为 null

Question

我正在尝试传递 props 以便将 React Router 用作我所在项目的一部分。我不断从该代码中收到链接为空的错误，我不确定为什么 -

标题组件： [![标头][1]][1]

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>
  );
}

导航组件：

[![nav][2]][2]

// 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>,
      ]}
    />
  );
}

我收到的错误消息：

[![error][3]][3]

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)

任何帮助将不胜感激。谢谢！！

我广泛使用ChatGPT，但无法解决这个问题

  [1]: https://i.stack.imgur.com/bwZRi.png
  [2]: https://i.stack.imgur.com/YeJVh.png
  [3]: https://i.stack.imgur.com/8TlNg.png

Answer 1

就我个人而言，我不会按照您的方式将 JSX 作为属性中的数组值传递。认识到 JSX 实际上只是调用函数的简写，并且您拥有

links

参数的方式是传递作为嵌套函数调用结果的元素，而不是在 React 期望这些函数（组件）的位置传递元素。被召唤。

我处理这个问题的方法是：

<Header
  links={[
    {className: "nav-link text-light", to: "/about", label: "Home"},
    {className: "nav-link text-light", to: "/contact", label: "About Us"},
    {className: "nav-link text-light" to: "/portfolio", label: "Portfolio"},
    {className: "nav-link text-light", to: "/resume", label: "Resume"}
  ]}
/>

然后：

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 className={link.className} to={link.to}>
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </nav>
  );
}