Dive into a comprehensive crash course on React Router, learning how to create and manage routes in React applications. Master essential concepts including BrowserRouter, Switch, nesting routes, redirecting routes, and utilizing match and history props. Explore powerful hooks like useHistory, useParams, useLocation, and useRouteMatch. Begin with initializing a new React app and creating a header component before delving into React Router installation and implementation. Progress through topics such as creating and testing routes, understanding the 'exact' prop, using the Switch tag, and implementing the Link tag for navigation. Discover advanced features like the basename prop, forceRefresh prop, and getUserConfirmation. Learn to handle 404 Not Found pages, access URL parameters, and implement nested routing. By the end of this tutorial, gain the skills to efficiently manage routing in your React applications, enhancing user navigation and overall app structure.
Overview
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.
Taught by
freeCodeCamp.org
