In November of 2021, React Router has launched v6 of their router. It has smaller build size, routing improvement and nested route improvements. Most of the MFEs of edX uses frontend-platform for routing. We will launch its major version change as the consumer MFEs would break after these changes.
Approach
FED-BOM will release a major version of frontend-platform and then update each MFE accordingly. We’ll need a review from respective team to run the changes locally or on stage server since there are a lot of code changes in the routing.
Steps to upgrade
First we need to upgrade the
react-router-dompackage to v6.There were some major changes in react router v6 you can follow these guidelines to migrate to v6:
If the MFE is using
PageRouteorAuthenticatedPageRouteof frontend-platformUpgrade frontend-platform to >=v5
npm install @edx/frontend-platform@5.0.0Rename
PageRoutetoPageWrapFunctionality of PageWrap a.k.a PageRoute and AuthenticatedPageRoute was changed in frontend-platform v5, before v5 these components were used to render the route but after v5 they are rendering children that is why now routes are updated and the components gets wrapped between PageWrap and AuthenticatedPageRoute)
What has changed/broken?
Redirect react-router-dom
useRouteMatch react-router-dom
Redirect
PageRoute
Switch
For Example
Change
to
Make sure all test cases are passing.
Make sure all flows of the MFE are working correctly by running the server locally
Make sure build is successful and there are no lint issues