React Router Crash Course

Practical crash course on routing in React applications. Starting from a new React app and a header component, it covers installing React Router, wrapping the app in BrowserRouter, creating and testing routes, the exact prop, Switch and Link tags, the basename, forceRefresh and getUserConfirmation options, scrolling to top on route change, 404 pages, reading URL parameters with useParams, useLocation, programmatic redirects with useHistory, and nested routing. Aimed at developers who already know React basics and want to add multi-page navigation to their apps.

Syllabus

Intro.
Initialize new React App.
Header Component.
React Router Installation.
BrowserRouter.
Creating Routes.
Testing Routes.
'exact' prop.
Switch Tag.
Link Tag.
basename prop.
forceRefresh Prop.
getUserConfirmation.
scroll to top on route change.
404 Not Found Page.
Access URL Params.
useParams Hook.
useLocation Hook.
Redirecting in React Router.
useHistory Hook.
Nested Routing.
Outro.