Upgrade react-router-dom to v6

[louischan-oursky]

react-router-dom@6 has been released. We are still using one of the beta version.

useBlocker was removed in v6.0.0-beta.7 and still does not come back as of 2022-05-20.

There is a bug issue regarding the * routes with the <a href> tag (remix-run/react-router#8086) and it is fixed in v6.0.0-beta7 (https://github.com/remix-run/react-router/releases/tag/v6.0.0-beta.7).

So, this issue will not be solved at this moment.

[andychow326]

Estimate: 2hr

BrowserRouter

• no special change

Routes

• no special change

Route

The default Route element is an Outlet (https://reactrouter.com/docs/en/v6/components/outlet). This means the route will still render its children even without an explicit element prop, so you can nest route paths without nesting UI around the child route elements.

• react-router-dom v6 introduced nest route element, for example:

Original:

<Route path="/users/" element={<UsersScreen />} />
<Route path="/users/add-user/" element={<AddUserScreen />} />
<Route
  path="/users/:userID/"
  element={<Navigate to="details/" replace={true} />}
/>
<Route
  path="/users/:userID/details/"
  element={<UserDetailsScreen />}
/>
<Route
  path="/users/:userID/details/add-email"
  element={<AddEmailScreen />}
/>

New version:

<Route path="users">
  <Route path="/" element={<UsersScreen />} />
  <Route path="add-user" element={<AddUserScreen />} />
  <Route path=":userID" element={<Navigate to="details/" replace={true} />}>
    <Route path="details" element={<UserDetailsScreen />}>
      <Route path="add-email" element={<AddEmailScreen />} />
    </Route>
  </Route>
</Route>

Link

• need to import from "react-router-dom" rather than "react-router"

Navigate

• no special change

useParams

• no special change

useSearchParams

• no special change

useNavigate

• need to import from "react-router-dom" rather than "react-router"

useHref

• need to import from "react-router-dom" rather than "react-router"

useBlocker

• removed since v6.0.2

useLocation

• need to import from "react-router-dom" rather than "react-router"

useResolvedPath

• need to import from "react-router-dom" rather than "react-router"