Migrating from v5 to RouterProvider

[rohit-gohri]

Context

I have a very large micro-frontends based application and we are currently on react-router-dom@v5 along with some incremental migration to react-router-dom-v5-compat in some places.

I'd like to make use of the new RouterProvider and Data APIs and rather than doing 2 migrations : once from v5 to v6 and then from v6 Routes to RouterProvider, I was thinking if there is a way to implement a reverse CompatRouter for mapping RouterProvider to v5 BrowserRouter which allows me to use DataAPIs in new routes while still keeping existing code running with v5 APIs.

Current

import {BrowserRouter} from 'react-router-dom';
import {CompatRouter} from 'react-router-dom-v5-compat';

export default () => {
  return (
    <BrowserRouter>
      <CompatRouter>
        <LegacyApp />
      </CompatRouter>
    </BrowserRouter>
  );
};

Possible?

import {RouterProvider} from 'react-router-dom-v5-compat';
import v6ToV5CompatRouter from './v6ToV5CompatRouter';
import router from './router';

export default () => {
  return (
    <RouterProvider router={router}>
      <NewPagesInApp />
      <v6ToV5CompatRouter>
        <LegacyApp />
      </v6ToV5CompatRouter>
   </RouterProvider>
  );
};