Skip to content

Migrate to React Router v6

Yuto Takano requested to merge cherry-pick-c79abd92 into master

Was originally just supposed to be an intermediary MR to prepare for a future RRv6 migration (from current React Router v5.3.4).

See merge request !541 (merged) for the original, and !578 (merged) for the revert.

(cherry picked from commit c79abd92)

It turned out to be more pain than needed to try to retrofit the React Router v6 architecture onto v5 to do a smooth transition. So it was simpler to just do the migration immediately.

Changes

  • Migrate React Router v5.3.4 to v6.30.2 (hopefully in the future to v7 too)
  • Replace all occurences of useHistory with useNavigate
  • Replace Switch in category-page and exam-page with Routes
  • Wherever we had nested routes created with useRouteMatch, we now use relative navigation like navigate(".")
  • Rename children prop on routes to element
    • This change in particular has a large diff on category-page and exam-page because they had large JSX children that are now indented to fit in the element prop
  • Update faro-react integration from RR5 to RR6 code
  • Update use-query-params integration from RR5 ro RR6 code

Cleaned up:

  • Authenticated routes are now very simple by using Outlet instead of wrappers
  • Fix the issue that led to the !578 (merged) revert (wildcard routes showing on every route, now prevented since RR6 parses "*" differently)
  • Fix for #371 (closed)
Edited by Yuto Takano

Merge request reports