React中导入Navbar组件到根组件失败，无法渲染问题求助

核心问题1：导入导出语法不匹配 #

你的NavbarComponent使用命名导出（export const NavbarComponent），但App.js中使用的是默认导入（import NavbarComponent from ...），这会导致组件无法正确加载——因为默认导出并未定义。

核心问题2：Radix Menubar组件结构不符合官方规范 #

你在代码中使用了不存在的<Menubar.Sub>组件，Radix UI的@radix-ui/react-menubar中子菜单需要通过Menubar.SubTrigger和Menubar.SubContent实现，而非Menubar.Sub。

修复步骤 #

步骤1：统一导入导出方式 #

选择以下任意一种方式即可：

方式A：将Navbar改为默认导出

修改NavbarComponent.js的导出语句：

import React from "react";
import { Menubar } from "@radix-ui/react-menubar";

const NavbarComponent = () => {
  // ... 原有组件内容不变
};

// 替换原有命名导出为默认导出
export default NavbarComponent;

方式B：在App.js中使用命名导入

修改App.js的导入语句：

// 替换原有默认导入为命名导入
import { NavbarComponent } from "./components/NavbarComponent/NavbarComponent";

步骤2：修复Radix Menubar子菜单结构 #

替换错误的<Menubar.Sub>为Radix官方要求的子菜单结构，以Home项为例：

import React from "react";
import { Menubar } from "@radix-ui/react-menubar";
// 可选：引入Radix官方基础样式（若无自定义样式）
import "@radix-ui/react-menubar/dist/index.css";

export const NavbarComponent = () => {
  return (
    <Menubar.Root>
      <Menubar.Menu>
        <Menubar.Item key="home">
          <Menubar.SubTrigger>Home</Menubar.SubTrigger>
          <Menubar.SubContent>
            <Menubar.Item key="home-link">
              <Menubar.Link href="#home">Home Link</Menubar.Link>
            </Menubar.Item>
            <Menubar.Item key="home-sub-link">Home Sub Link</Menubar.Item>
          </Menubar.SubContent>
        </Menubar.Item>
        {/* 其余无需求子菜单的项保持原有结构即可 */}
        <Menubar.Item key="about">
          <Menubar.Trigger>About</Menubar.Trigger>
          <Menubar.Link href="#about">About Link</Menubar.Link>
        </Menubar.Item>
        <Menubar.Item key="how-to-buy">
          <Menubar.Trigger>How To Buy</Menubar.Trigger>
          <Menubar.Link href="#how-to-buy">How To Buy Link</Menubar.Link>
        </Menubar.Item>
        <Menubar.Item key="tokenomics">
          <Menubar.Trigger>Tokenomics</Menubar.Trigger>
          <Menubar.Link href="#tokenomics">Tokenomics Link</Menubar.Link>
        </Menubar.Item>
        <Menubar.Item key="buy-now">
          <Menubar.Trigger id="buy-now-trigger">Buy Now</Menubar.Trigger>
          <Menubar.Link
            id="buy-now-button"
            href="#"
            onClick={() => {
              console.log("Buy Now Button Clicked");
            }}
          >
            Buy Now
          </Menubar.Link>
        </Menubar.Item>
      </Menubar.Menu>
    </Menubar.Root>
  );
};

额外检查项 #

• 确保已正确安装Radix依赖：执行npm install @radix-ui/react-menubar或yarn add @radix-ui/react-menubar
• 确认文件路径无误：./components/NavbarComponent/NavbarComponent确实指向你的组件文件

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