📝 The Future of React Router and @reach/router blog post can be found - here.
📝 React Router documentation on the different Hooks that can be used can be see seen - here.
👩‍💻 The code sample shared for this lesson contains the use of the useParams, useHistory, and useLocation Hooks in the client project.

React Router has started to move towards a more hook-based API as documented here. In version 5.x (and up), React Router provides certain Hooks to access route-specific information in our components. The newest version of React Router is 100% backward-compatible so the capability to use the render props pattern or higher-order components from React Router is still supported. In this lesson, we'll discuss some changes that can be made to our app to use the new hook-based API.

Since we're able to use Hooks to access route-specific information within components, we'll no longer need to use the render() function prop in the <Route /> component to pass along route-specific prop objects. Though we're able to use the component prop to dictate which component should be shown for which <Route /> path, we're also able to convey this by simply placing the component as a child of the <Route />.

import React from "react";

import {

  BrowserRouter as Router,

  Switch,

  Route,

} from "react-router-dom";

import { Home } from "./components";