Edit 1: Ursprüngliche Frage: So erstellen Sie eine Single-Page-Anwendung mit React

Da die Frage nicht spezifisch genug ist und bereits beantwortet wurde, müssen Sie das React-Routing aus der Antwort von Imran Rafiq Rather lernen

Bearbeiten 2: Schreiben Sie die Frage neu und öffnen Sie sie für einen spezifischeren Anwendungsfall erneut.

Ich folge einem Tutorial, um zu lernen, wie man Seiten mit React-route weiterleitet. Bisher ist mir klar, dass ich das Tag <Route> in die Funktion createRoutesFromElements der Komponente createBrowserRouter() einfügen muss:

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

In jedem „element=" werden modular erstellte Seiten importiert. Der Inhalt ist wie folgt:

RootLayout.js aus dem Tutorial

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>
    )
}

Wenn ich eine alte Komponente habe, die von JSX React Bootstrap erstellt wurde, lautet der Code wie folgt:

NavbarLayout.js

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

export default NavbarComp;

Dann sieht die Route so aus:

<header>
            <NavbarComp/>
        </header>

Warum wird die Komponente nicht fehlerfrei auf meiner Seite angezeigt?