执行npm start后页面空白无报错，React路由代码问题求助

核心问题 #

你遇到的页面空白、ESLint提示main未使用这两个问题，根源是组件命名冲突：

• 你定义的布局组件用了小写的main，但JSX里的<main />会被解析成HTML原生的<main>标签，而非你自定义的组件。这直接导致：
  1. ESLint检测到你定义的main变量从未被真正调用，触发警告；
  2. 路由渲染的是空的原生<main>标签，而非包含Navbar、Outlet、Footer的布局，所以页面显示空白。
• 另外，Route被import但全程没用到，也会触发ESLint的无用变量警告。

修复方案 #

1. 修改组件命名：遵循React组件规范（首字母大写），把main改成Main，避免和原生HTML标签冲突；
2. 更新路由引用：把路由配置里的<main />替换成<Main />；
3. 清理无用导入：删掉import语句里的Route，消除无用变量警告。

修改后的完整代码 #

import {
  createBrowserRouter,
  RouterProvider,
  Outlet,
} from "react-router-dom";
import './App.css';
import * as React from "react";
import Register from "./pages/Register"
import Login from "./pages/login"
import Write from "./pages/Write"
import Home from "./pages/home"
import Single from "./pages/single"
import Footer from './components/Footer';
import Navbar from './components/navbar';
import "./project.scss"

// 组件名改为大写开头的Main
const Main = () => {
  return (
    <div>
      <Navbar />
      <Outlet />
      <Footer />
    </div>
  )
};

const router = createBrowserRouter([
  {
    path: "/",
    // 引用修改后的Main组件
    element: <Main />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/post/:id",
        element: <Single />,
      },
      {
        path: "/write",
        element: <Write />,
      },
    ],
  },
  {
    path: "/register",
    element: <Register />,
  },
  {
    path: "/login",
    element: <Login />,
  },
])

function App() {
  return (
    <div className="app">
      <div className='container'>
        <RouterProvider router={router} />
      </div>
    </div>
  );
}

export default App;

验证效果 #

重新运行npm start后：

• ESLint的两个警告会消失；
• 页面会正确渲染Navbar、对应子路由内容和Footer，不再显示空白。

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