Add routing to your React apps with React Router v5 (incl. hooks)
Greg D'Angelo is the founder of AlterClass.io. Greg has spent most of his career developing large-scale web applications and now focuses on bringing his expertise online to help everyone master modern web development. He is the creator of the AlterClass React program.
This is a free preview of the React Routing module from the AlterClass React JS program
Routing is the process by which a web application uses the current browser URL (Uniform Resource Loader) to determine what content to show to a user. It is essentially the way your users navigate through your website or web application.
But routing does not come out of the box with React. That's why you need a third-party library to enable routing and create the routes of your application.
So, in this course, you'll learn to use the popular React Router library to route users to different views in your React application, build navigation links, use URL parameters to build dynamic pages, code-split your app to optimize its performance, and more.
By the end of this course, you’ll be able to:
- Enable routing in your React applications using the
- Use the
Routecomponent to add routes to your application
- Use the
pathprop to specify static routes (those without URL parameters, e.g. /blog) and dynamic routes (those with URL parameters, e.g. /blog/:slug)
- Create a custom
404page for your application by defining a catch-all route
- Access the values of URL parameters using React Router’s
- Declaratively redirect users by rendering React Router’s
- Imperatively redirect users by accessing the
historyobject via the
- Access the value of query parameters using React Router’s
- Protect the routes of your application by checking if the user is authenticated before rendering the content
- Setup route-based code splitting into your app by using dynamic
You’ll need to have Node.js (v10+) on your local development machine.
A React development environment set up with Create React App. To set this up, follow Create a React app from scratch with create-react-app of the Design and Build a 3-tiers Pricing Table Component with React and Tailwind CSS course.
React router already installed in your React application. In your terminal, use
npmto install the package:
npm install --save react-router-dom