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:

  • Migrating to React Router v6: A complete guide - LogRocket Blog

  • https://reactrouter.com/en/main/upgrading/v5

  • How to upgrade React Router v5 to v6

• If the MFE is using PageRoute or AuthenticatedPageRoute of frontend-platform

  • Upgrade frontend-platform to >=v5
    npm install @edx/frontend-platform@5.0.0

  • Rename PageRoute to PageWrap

  • 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

Open

Open

• 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

Roadmap Ticket

React Router Upgrade to v6 · Issue #276 · openedx/platform-roadmap