Edit 1: Original question: How to create a single-page application using React

Since the question is not specific enough and has been answered before, you need to learn React-routing from Imran Rafiq Rather's answer

Edit 2: Rewrite the question and reopen it for a more specific use case.

I'm following a tutorial to learn how to route pages using React-route. So far, I understand that I need to add the <Route> tag inside the createRoutesFromElements function of the createBrowserRouter() component. The code is as follows:

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

In each "element=", pages created in a modular manner are imported. The content is as follows:

RootLayout.js from 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>
    )
}

If I have an old component created by JSX React Bootstrap, the code is as follows:

NavbarLayout.js

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

export default NavbarComp;

Then the routing will be like this:

<header>
            <NavbarComp/>
        </header>

Why is the component not displayed on my page and there are no errors?