React项目编译成功但浏览器无内容显示，控制台无报错求排查

你的问题出在两处语法错误，导致组件没有返回正确的React元素，所以浏览器无内容且控制台没报错：

1. App.js的错误 #

原函数里多了一层大括号，且缺少return语句，组件相当于没有返回任何可渲染内容。

修正后的App.js代码：

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Add from "./pages/Add";
import Home from "./pages/Home";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/add" element={<Add />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

2. Home.jsx的错误 #

return后面用了大括号，会把JSX解析成对象字面量，而非React元素，组件实际返回的是一个空对象，自然不会渲染内容。

修正后的Home.jsx代码：

import React from 'react';

const Home = () => {
  return <div>Home</div>;
}

export default Home;

或者更简洁的写法：

import React from 'react';

const Home = () => <div>Home</div>;

export default Home;

原理：React组件必须返回可渲染的React元素（或null、数组等合法内容），你之前的写法要么没返回内容，要么返回了非渲染对象，所以页面空白且无报错。

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