React router has ErrorBoundary or errorElement prop on your route

Question

this is my app.js

import {createBrowserRouter, RouterProvider} from "react-router-dom";
import RootLayout from "./pages/Root";
import HomePage from "./pages/Home";
import MatchingPage from "./pages/Matching";
import RankingListPage from "./pages/RankingList";
import ShoppingPage from "./pages/Shopping";
import PersonalCenterPage from "./pages/PersonalCenter";
import React from 'react';
import ReactDOM from 'react-dom/client';
const router = createBrowserRouter([
    {path:'/',element:<RootLayout/>
        ,children:[
            {path:'/',element:<HomePage/>},
            {path:'/matching',element:<MatchingPage/>},
            {path:'/rankinglist',element:<RankingListPage/>},
            {path:'/shopping',element:<ShoppingPage/>},
            {path:'/personalcenter',element:<PersonalCenterPage/>},
        ]
    },

]);

function App() {
    return <RouterProvider router={router}/>
}
export default App;

and this is my Root.js:

import {Outlet} from 'react-router-dom'
import MainNavigation from "../components/MainNavigation";

function RootLayout(){
    return (
        <>
            <MainNavigation/>
            <h1>Layout</h1>
            <Outlet/>
        </>
    );
}

export default RootLayout;

and then the Home.js,Mathing.js,PersonalCenter.js,Shopping.js,RankingList.js are the same at most instead of the title name of different pages, the tempelete like this(make Home.js as a example):

function  HomePage(){
    return(

            <h1>My Home Page</h1>

    )
}
export default HomePage;

AND the MainNavigation.js which is in Root.js is as follows:

import {Outlet} from 'react-router-dom'
import MainNavigation from "../components/MainNavigation";

function RootLayout(){
    return (
        <>
            <MainNavigation/>
            <h1>Layout</h1>
            <Outlet/>
        </>
    );
}

export default RootLayout;

---

BUT After local depolyment(I use creat-react-app), it has error in pageenter image description here

I use react 18, react router 6

I have try to Comment out the router code change to : "return <h1>hello</h1> "in App.js and it works , but if I use "return <RouterProvider router={router}/> "instead, it just appears error like img above.