React Router Hooks
We'll discuss the small changes that can be made to use some of the new Hooks that React Router provides.
📝 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
useLocationHooks 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