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

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

• 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 npm to install the package: npm install --save react-router-dom