Page Comparison

...

• 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:

  • https://blog.logrocket.com/migrating-react-router-v6-guide/

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

  • https://morioh.com/p/995f1244f33b

• 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)

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

...