Upgrade react-router-dom to latest version

[anshgoyalevil]

This is a Tracker Issue for all react-router-dom related upgrades.

• Add the react-router compatibility package to merge v5 and v6 APIs according to the official migration guide: Official v5 to v6 Migration Guide remix-run/react-router#8753 and https://reactrouter.com/en/6.16.0/upgrading/v5 -- Setup router compatibility package for react-router-dom v6 upgrade #1970
• Replace react-router compatibility package usage with v6 imports.
  • Upgrade each Route defined inside index.jsx to use v6 API.
    • Use relative links instead of nested links.
  • Replace nested components with elements attribute. Example commit here.
  • Use <Outlet /> instead of props.children to render nested routes inside <Page />. Example commit here.
  • Test thoroughly and ship

Useful resources:

• React Router v6 Migration Guide: https://reactrouter.com/en/main/upgrading/v5
• React Router Compatibility Package usage and guide: Official v5 to v6 Migration Guide remix-run/react-router#8753
• Sample commit showcasing the usage of <Outlet /> and <Switch> components: ff22e64 (This commit was created as a part of the migration but is just a part of the story since it doesn't fixes the nested routing APIs and also doesn't use v6 Link component)

[priyanshu-kun]

rrdv6 has plenty of breaking changes compare to v4 that currently in use, I think we have to migrate it gradually.

[anshgoyalevil]

Yes, we would have to upgrade it sequentially version by version, keeping the project intact

[priyanshu-kun]

@anshgoyalevil do we have to migrate it to v5 before v6?

[anshgoyalevil]

Yes. First v5, then 5.1, and then v6. (There can be more versions between 5.1 and 6, to which we would have to upgrade first).

Though it is a part of my LFX Mentorship, if you want to help out, you may DM me on Slack, and we can collaborate on another dependency upgrade, so that we both don't have to create the same type of PRs simultaneously.