Add Frame support to react-router

[hoffnung8493]

I just got a glance of Remix V3 from the conference video and it would be amazing to have Remix v3 Frame support in react-router.

Currently, you can only have a single Outlet per route, basically we are restricted to just one nested route, which is the case because the routes are matched with the URL:

...
<div>
  <Outlet> 
</div>
...

This is great, but there could be plenty of scenarios, where you would want multiple nested routes in the same level:

...
<div>
  <Outlet> 
  <Frame src={href("/route_A")} // Frame A
  <Frame src={href("/route_B")} // Frame B 
  // Or even dynamically render different Frames (map, if else etc)
</div>
...

Here both route_A and route_B would be a standard route file that has all the react-router features (loader & action, client loader & action, default export for the route component etc). The great thing about this is that you can put the relevant server code and the client code very close together in a single route file. Otherwise we would either have to handle all the data loading via the single parent component and pass it all down to the child components (Frame A and B) or fetch data from each component with useEffect and fetcher. While RSC could be a potential solution here, but I feel Frame is such a cleaner solution to this. It would just work like other route files. The only difference is that with Outlet, it would find its route info via the browser URL, where as with Frame, it would use the developer provided URL (src).

This would also work great with the concept of "full stack component".

Also, since its a "contained (i)frame", you can also just use Form instead of fetcher.Form, and also not worry about using the wrong action value.

Although not critical, I think it might be useful to have an option to prevent the user from visiting the "Frame" route directly, which could be done in the routes.ts file or in the route file. So that particular routes can only be opened via Frames.