使用Vite+React时，导入的组件无法在浏览器中显示

你的代码存在三个关键错误，逐一修正后即可正常显示组件：

1. Nav组件未返回JSX内容 #

Navbar.jsx中的Nav函数没有返回要渲染的JSX，React组件必须明确返回需要展示的元素。修改后代码：

import React from "react";

function Nav() {
    // 补充return语句返回JSX结构
    return (
        <>
            <h1>Navbar goes here</h1>
        </>
    )
}

2. 默认导出方式错误 #

你当前导出的是Nav()（调用函数后的结果），但React组件需要导出函数本身而非执行结果。修正后：

// 去掉括号，导出函数引用
export default Nav

3. 导入方式不匹配 #

因为Navbar.jsx使用的是默认导出，App.jsx里不能用解构导入{ Nav }，需改为默认导入：

// 去掉大括号，使用默认导入语法
import Nav from "./Componentes/Navbar";

function App() {
  return (
    <>
      <Nav />
    </>
  )
}

完成以上三处修改后，重启Vite开发服务器，浏览器即可正常显示Navbar组件内容。

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