React Router: start migrating to v6 (#66921)

Chore: add the react-router-compat package
This commit is contained in:
Levente Balogh
2023-04-27 07:18:38 +02:00
committed by GitHub
parent 2beee35567
commit 61e3bbb858
4 changed files with 79 additions and 16 deletions
+17 -2
View File
@@ -8,7 +8,8 @@ import prismjs from 'prismjs';
import react from 'react';
import reactDom from 'react-dom';
import * as reactRedux from 'react-redux'; // eslint-disable-line no-restricted-imports
import * as reactRouter from 'react-router-dom';
import * as reactRouterDom from 'react-router-dom';
import * as reactRouterCompat from 'react-router-dom-v5-compat';
import * as redux from 'redux';
import * as rxjs from 'rxjs';
import * as rxjsOperators from 'rxjs/operators';
@@ -98,7 +99,21 @@ exposeToPlugin('jquery', jquery);
exposeToPlugin('d3', d3);
exposeToPlugin('rxjs', rxjs);
exposeToPlugin('rxjs/operators', rxjsOperators);
exposeToPlugin('react-router-dom', reactRouter);
// Migration - React Router v5 -> v6
// =================================
// Plugins that still use "react-router-dom@v5" don't depend on react-router directly, so they will not use this import.
// (The react-router-dom@v5 that we expose for them depends on the "react-router" package internally from core.)
//
// Plugins that would like update to "react-router-dom@v6" will need to bundle "react-router-dom",
// however they cannot bundle "react-router" - this would mean that we have two instances of "react-router"
// in the app, which would casue issues. As the "react-router-dom-v5-compat" package re-exports everything from "react-router-dom@v6"
// which then re-exports everything from "react-router@v6", we are in the lucky state to be able to expose a compatible v6 version of the router to plugins by
// just exposing "react-router-dom-v5-compat".
//
// (This means that we are exposing two versions of the same package).
exposeToPlugin('react-router', reactRouterCompat); // react-router-dom@v6, react-router@v6 (included)
exposeToPlugin('react-router-dom', reactRouterDom); // react-router-dom@v5
// Experimental modules
exposeToPlugin('prismjs', prismjs);