React+TSX中map循环无法渲染HTML元素问题求助

Hey there! I get it, switching from Vue to React can have little gotchas like this—let's fix your missing links right away.

The Root Cause #

Your map function is definitely running (you confirmed that with the console log), but the <Link> components you're returning are empty—they don't have any text content inside them. In React, unlike Vue where you might write <router-link to="/">Home</router-link> directly in a template, JSX requires you to explicitly pass the content as a child of the component. Without that, the Link element exists in the DOM but has nothing to display visually.

The Fix #

Update your map callback to include the link.title inside the <Link> component:

return (
  <header className="header">
    <div className="logo"></div>
    <nav>
      {menuLinks.map((link) => {
        console.log("Entered", link);
        // Add the link title as a child of Link
        return <Link key={link.path} to={link.path}>{link.title}</Link>;
      })}
    </nav>
  </header>
);

Quick Extra Tip #

I also removed the + i from your key prop. Since your path values are unique (they should be, for routes), using link.path alone is a better key—it's more stable than adding an index, which can cause unnecessary re-renders if your array order changes later.

A Quick Vue vs React Note #

In Vue, you're used to putting content directly between component tags in templates. In React's JSX, that content becomes the component's children prop, so you have to make sure you include it explicitly inside the opening and closing tags of the component. That's the main difference tripping you up here!

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