React Router v6 - How to render a route as a peer of another component?

[zzzgit]

Hi everyone,

I'm currently working on a React project that uses React Router v6 for client-side routing. I have a routing configuration that looks like this:

App.tsx.

function App(): JSX.Element {
    return (
        <>
            <NavBar />
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<Home />} />
                    <Route path="/about" element={<About />} />
                    <Route path="/contact" element={<Contact />} />
                    <Route path="/*" element={<NotFound />} />
                </Route>
                <Route path="/foo" element={<div>foo is an individual page!</div>} />
            </Routes>
        </>
    );
}

export default App;

const Layout = (): JSX.Element => {
    return (
        <>
            <Outlet />
        </>
    );
};

The NavBar and Routes components are working fine, and the Layout component is being rendered correctly with its child routes.

However, I have a problem with the /foo route. When I navigate to /foo, the <div> element with the text "foo is an individual page!" is rendered as a child of the Layout component in DOM, but I want it to be a peer of the / structure rather than under /.

Is there a way to modify my routing configuration to achieve this?