Add routing to your React apps with React Router v5 (incl. hooks)

Add routing to your React apps with React Router v5 (incl. hooks)

Your instructor

Greg D'Angelo

Greg D'Angelo

CEO and Founder, AlterClass.io

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 BrowserRouter component
  • Use the Route component to add routes to your application
  • Use the Route component’s path prop 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 404 page for your application by defining a catch-all route
  • Access the values of URL parameters using React Router’s useParams hook
  • Declaratively redirect users by rendering React Router’s Redirect component
  • Imperatively redirect users by accessing the history object via the useHistory hook
  • Access the value of query parameters using React Router’s useLocation hook
  • 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 import(), React.lazy and React.Suspense

Prerequisites

Want to stay up-to-date with modern web development?

Join 1,285+ developers who get early access to new tutorials, screencasts, articles, and more.

We care about the protection of your data. Read our Privacy Policy.

© 2022 AlterClass. All rights reserved.

Join Discord