React Router@6路由报错：匹配的根路由无element/Component

报错信息：

Matched leaf route at location "/" does not have an element or Component. This means it will render an

return (<Outlet />)

with a null value by default resulting in an "empty" page.

问题出在你的路由配置里两处错误使用了大写的Element属性，React Router v6 要求路由的渲染内容必须通过小写的element属性传递，大写属性会被框架忽略，导致根路由找不到对应的渲染元素，从而抛出这个错误。

直接修改代码里的两处大写Element为小写element即可解决：

修正后的完整代码：

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"

import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Outlet,
} from "react-router-dom";

const main = () => {
  return (
    <div>
      <Navbar />
      <Outlet />
      <Footer />
    </div>
  )
};

const router = createBrowserRouter([
  {
    path: "/",
    // 修正：Element 改为 element
    element: <main />,
    children: [
      {
        path: "/",
        // 修正：Element 改为 element
        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;

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