Route in Nested Component doesn't work.

[sharp willow]

I have a route that renders a component.
I would like that component to then internally render something based on a nested route.
Something like:

function Foo() {
  return (
    <div>
      <header>title</header>
      <Route path="bar" element={<Bar />} />
      <Route path="cof" element={<Cof />} />
    </div>
  );
}

...
<Route path="foo" element={<Foo />} />

But this fails and Foo doesn't even render.
If I remove the nested routes inside Foo, then Foo renders normally.
How do I make this work?
I expect that at address /foo/bar, I would get the Foo component with the internal component for Bar.

[late patio]

Hello @sharp willow . I'm unsure about your file structure (and that's mostly what defines your routes, not <Route /> component).

You probably need to use an <Outlet /> component instead of the <Route />s so that's where the nested routes would load.

The file structure to achieve what you're aiming to would probably be:

/routes
  /foo.tsx
  /foo
    /bar.tsx
    /cof.tsx

[sharp willow]

I am unsure why file structure has anything to do with routes? Since we explicitly render a specific component for each route, it doesn't matter where the files are in the tree 🤔

[wicked briar]

File structure matters in Remix, but not with react-router.
If you want to define routes within a component, you have to define them within a Routes component. However you will not be able to define loaders here, unlike the top-level defined routes.