编辑1： 原问题：如何使用React创建单页应用

由于问题不够具体，之前已经回答过，需要从Imran Rafiq Rather的回答中学习React-routing

编辑2： 重写问题，重新打开以获取更具体的用例。

我正在按照教程学习如何使用React-route路由页面。到目前为止，我了解到需要在createBrowserRouter()组件的createRoutesFromElements函数内部添加<Route>标签，代码如下：

const router = createBrowserRouter( 
createRoutesFromElements(
   <Route path="/" element={<RootLayout/>}>
        <Route index element={<Home/>}/>
   </Route>
))

在每个"element="中，都导入了以模块化方式创建的页面。内容如下：

来自教程的RootLayout.js

export default function RootLayout(){
    return(
        <div className='root-layout'>
            <header>
                <nav>
                    <h1> Jobarouter </h1>
                    <NavLink to="/"> Home </NavLink>
                    <NavLink to="about"> About </NavLink>
                    <NavLink to="help"> Help </NavLink>
                    <NavLink to="careers"> Login </NavLink>
                </nav>
            </header>
            <main>
                <Outlet/>
            </main>
        </div>
    )
}

如果我有一个由JSX React Bootstrap创建的旧组件，代码如下：

NavbarLayout.js

const NavbarComp = () => {
   //navbar content
}

export default NavbarComp;

那么路由将是这样的：

<header>
            <NavbarComp/>
        </header>

为什么组件在我的页面上没有显示，也没有任何错误？