React Router v6 upgrade
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-dom
package 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
PageRoute
orAuthenticatedPageRoute
of frontend-platformUpgrade frontend-platform to >=v5
npm install @edx/frontend-platform@5.0.0
Rename
PageRoute
toPageWrap
Functionality 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)
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