Feature Request: <Routes> function children

[daninus14]

Hi, I'm trying to extend RR library mode for my use case, and while I can extend it by having a function that generates routes, I wanted to make it more idiomatic react by having components which would return components themselves, for example

<NamedRoute
    name="Term Details"
    path="details"
    element={<div>Term Details</div>}
  />

That code would itself return a regular Route component.

However I get the following error:

Uncaught Error: [NamedRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

A very similar code that instead just calls a function {makeNamedRoutes({name: "Term", path: "term", element: <div>a</div>})} actually does work.

It seems the reason is that the Route component doesn't evaluate the component in case it's not a route itself, and therefore it becomes not extensible.

Is there a workaround for this?

Is it possible to request a change to make this functionality possible? I think this is a pretty straightforward case of extensibility which is surprisingly not allowed

[daninus14]

Bringing over the discussion to github from discord. Thanks @rossipedia

@rossipedia
The main thing you're going to run up against is that isn't actually rendered with React. Instead those elements are essentially treated as "route config objects", and then the resulting route config tree is fed into useRoutes.

I'm pretty sure changing that up to support arbitrary components is much less straightfoward than one would assume, as it's fundamental to how routing works in react-router, at least for versions 6+

See:
https://github.com/remix-run/react-router/blob/fbe796a4c5f257d710b2f779235e0cbcaef25396/packages/react-router/lib/components.tsx#L1127-L1159
https://github.com/remix-run/react-router/blob/fbe796a4c5f257d710b2f779235e0cbcaef25396/packages/react-router/lib/components.tsx#L817

API reference: https://api.reactrouter.com/v7/functions/react_router.useRoutes.html

Couldn't this line https://github.com/remix-run/react-router/blob/fbe796a4c5f257d710b2f779235e0cbcaef25396/packages/react-router/lib/components.tsx#L1128 be changed to instead of simply checking if the element.type === Route, do multiple conditionals like

if (element.type !== Route) {
  if (typeof element === "function") {
    if (type in (element)().type !== Route) {
      `[${typeof element.type === "string" ? element.type : element.type.name}] is not a <Route> component. All component children of <Routes> must be a <Route> or     <React.Fragment>`
    }
  } else {
    `[${typeof element.type === "string" ? element.type : element.type.name}] is not a <Route> component. All component children of <Routes> must be a <Route> or     <React.Fragment>`
  }
}

That was just coded here, there's a few things missing since I'm not doing it in the editor... the idea is basically just to check if it's a function or something that returns Route elements and then just treat the result as the element itself. What do you think?

@rossipedia : I guess in theory that could work, but I'm probably not the best to evaluate the repercussions of that 🤔

Can anyone please chime in?

[daninus14]

I just want to note that:

• This is very simple and straightforward to implement
• It doesn't seem to add much complexity for the future
• It makes react-router much more extensible
• It is idiomatic react
• Many users have issues with this lack of extensibility which is expected. A quick search in discord yielded:
  • https://discord.com/channels/770287896669978684/875874021982482442/974172693920374814
  • https://discord.com/channels/770287896669978684/771068344320786452/946186057198764092