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 theuseParams
,useHistory
, anduseLocation
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";
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two