当我使用 localhost 时，使用 Vite 的 React 应用程序显示空白屏幕

Question

我正在使用 vite 开发一个 React 项目，但是每当我尝试检查浏览器时，我只会看到一个空白页面。我已经检查了我的 app.tsx 但没有错误，一切看起来都很好，

我尝试检查 app.tsx 或我的应用程序中的任何其他文件是否有任何错误，还检查了控制台，但没有发现错误，我希望看到页面的 UI

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Signup from "./pages/SignupForm";
import Login from "./pages/LoginForm";
import VerifyEmail from "./pages/VerifyEmail";
import NotFound from "./not-found";
function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route index element={<Signup />} />
          <Route path="/login" element={<Login />} />
          <Route path="/verify-email" element={<VerifyEmail />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Answer 1

这段代码按预期对我有用。 所以我猜错误出在你的组件内部。

import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route index element={"<Signup />"} />
          <Route path="/login" element={"<Login />"} />
          <Route path="/verify-email" element={"<VerifyEmail />"} />
          <Route path="*" element={"<NotFound />"} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;