MemoryRouters inside of a BrowserRouter, v6

[jamesmarrs]

I have universal components that are built on top of the react-router API like modals, tabs, etc that are used extensively with nested routes. I really want to reuse these components in a lesser, non browser router context, to organize and maintain my most complicated and independent components within the project. I am trying to use a memory router inside a browser router for this reason. I think it would be useful to apply the react-router paradigm to these components using a MemoryRouter. This would give me the ability to use components that have already been built on this API that work extremely well, and to not re-invent the wheel when react-router excels at this functionality.

After doing a bit of research on the issue, a solution that works with the current API, following @ryanflorence suggestion from #9112 (comment)

// Rendered in a browser router.
export const ComplicatedComponent = React.memo((props) => {

  // Create a new memory router. 
  const router = createMemoryRouter(<YOUR_NEW_ROUTER {...props}/>);
  
    const ref = React.useRef();

        
    React.useEffect(() => {
      ReactDOM.render(
        <RouterProvider router={router} />,
        ref.current
      );
    }, [router]);

    return <div ref={ref} />;
  }
);

I navigate the original tree by importing the BrowserRouter export directly: router.navigate()

This solution comes with its issues:

• Requires you to recreate any context needed for components/themes.
• If props change, render() is called.
• The current tree is completely disconnected from the other tree.

Shipping a solution like this isn't an option for me, so i was interested to see if there has been any traction on this issue since @timdorr commented on a simplified version of a proposal from: #9601 (comment)

If there is currently someone working on this, could I be pointed in the right direction to collaborate or help with this?

Thanks for all the work on this library!