React+Vite应用无报错却不渲染组件，求问题排查

问题场景 #

使用Vite作为打包工具开发React应用，控制台无任何错误输出，但页面仅展示CSS设置的背景图，自定义的表单组件未渲染。相关代码及配置如下：

代码文件 #

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Adopt Me! v8</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id ="root">not rendered</div>
    <script type="module" src="./App.jsx"></script>
</body>
</html>

App.jsx（原错误代码）

import React from "react";
import {createRoot} from "react-dom/client";
import SearchParams from "./SearchParams";

const App = () => {
  <div>
    <h1>Adopt Me !</h1>
    <SearchParams />
  </div>
};

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

SearchParams.jsx

const SearchParams = () => {
    const location = "Seattle, WA";
    return (
      <div className="search-params">
        <form>
          <label htmlFor="location">
            Location
            <input id="location" value={location} placeholder="Location" />
          </label>
          <button>Submit</button>
        </form>
      </div>
    );
  };

export default SearchParams;

环境配置 #

ESLint配置

{
    "extends": [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:react/recommended",
      "plugin:jsx-a11y/recommended",
      "plugin:react-hooks/recommended",
      "prettier"
    ],
    "rules": {
      "react/prop-types": 0,
      "react/react-in-jsx-scope": 0
    },
    "plugins": ["react", "import", "jsx-a11y"],
    "parserOptions": {
      "ecmaVersion": 2022,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "es6": true,
      "browser": true,
      "node": true
    },
    "settings": {
      "react": {
        "version": "detect"
      },
      "import/resolver": {
        "node": {
          "extensions": [".js", ".jsx"]
        }
      }
    }
  }

package.json

{
  "name": "pet-adoption-app-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "format": "prettier --write \"src/**/*{.js,.jsx}\"",
    "lint": "eslint \"src/**/*{.js,.jsx}\" --quiet",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.1",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.25.3",
    "prettier": "^2.7.1",
    "vite": "^4.3.9"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

错误定位 #

核心问题出在App.jsx的组件定义中：箭头函数使用大括号{}包裹代码块，但没有显式返回JSX元素。React函数组件必须返回一个React元素（或null），此处代码块内的JSX没有被return，导致组件返回undefined，最终渲染空内容。

修复方案 #

修改App.jsx，为箭头函数添加return关键字，或者改用箭头函数的隐式返回（去掉大括号，改用小括号包裹JSX）：

方案1：添加显式return #

import React from "react";
import {createRoot} from "react-dom/client";
import SearchParams from "./SearchParams";

const App = () => {
  return (
    <div>
      <h1>Adopt Me !</h1>
      <SearchParams />
    </div>
  );
};

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

方案2：使用隐式返回 #

import React from "react";
import {createRoot} from "react-dom/client";
import SearchParams from "./SearchParams";

const App = () => (
  <div>
    <h1>Adopt Me !</h1>
    <SearchParams />
  </div>
);

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

额外检查点 #

1. 确认SearchParams.jsx文件路径正确，与App.jsx在同一目录下
2. 确认Vite插件@vitejs/plugin-react已正确安装并配置（package.json中已包含，无需额外配置）
3. 检查CSS是否覆盖了root元素的内容，确保组件渲染后内容可见

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