> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

**Routing** is the process by which a web application uses the current browser URL (**U**niform **R**esource **L**oader) 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+)](https://nodejs.org/en/) on your local development machine.

- A React development environment set up with [Create React App](https://create-react-app.dev/). To set this up, follow [Create a React app from scratch with create-react-app](/lessons/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](/courses/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`

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

In this lesson, you'll learn about the concept of routing in a web application, understand server-side routing, its pros, and cons, and learn about the differences between server-side and client-side routing.

Introduction - What is Routing and Server-side vs. Client-side Routing

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

In this lesson, you'll learn how to enable routing in your app using the `<BrowserRouter />` component from React Router, and create the routes and render the different views of your app using the `<Route />` component.

Create Basic Routes With BrowserRouter

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

In this lesson, you'll learn how to use the `<Link />` component from React Router to allow your users to navigate around your application in a declarative and accessible way.

Use The Link Component To Navigate Between Routes

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

In this lesson, you'll learn to build navigation links using `<NavLink />`,  which is a special version of the `<Link />` component that gets an active state when the current URL matches its location.

Style A Link That Is Active With NavLink

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

URL parameters are a fundamental concept of building web applications. In this lesson, you'll learn how to effectively leverage URL parameters in your React app using the `useParams` hook to create dynamic pages.

Use URL Parameters With React Router

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

The `path` property of the `<Route />` component can accept a string, an array of strings, or even regular expressions. So, in this lesson, you'll break down this prop and see how to create powerful rules to define the paths of your routes using regex.

Use Regular Expressions With Routes

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

In this lesson, you'll learn how to retrieve and parse the query strings from the current URL using the `useLocation` hook from React Router and the browser's built-in `URLSearchParams` API to use them in your React components.

Parse Query Strings In React Router

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

In this lesson, you'll learn how to implement a catch-all route for handling 404 pages in a React app with React Router.

Handle 404 Pages (Catch-All Routes) With React Router

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

In this lesson, you'll learn how to use the `<Redirect />` component from React Router to create a redirect rule from one route to another.

Redirect To Another Page With React Router

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

You'll often need to protect some pages of your application and display them only if the user is authenticated. So, in this lesson, you'll learn how to create a custom and reusable `<ProtectedRoute />` component to protect your routes using React Router.

Protected Routes And Authentication With React Router

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

Sometimes, you need to navigate the user to a new location without clicking on an actual link, but when he has performed a specific action in your app. That's when programmatic navigation is necessary. So, in this lesson, you'll learn how to navigate programmatically using React Router.

Programmatically Navigate Using React Router

> This is a free preview of the React Routing module from the [AlterClass React JS program](https://alterclass.io/courses/react)

Finally, we'll look at what code-splitting is and how to do it, and how to implement it with React Router to split your app into separate bundles your users can progressively load when needed.

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

Style A Link That Is Active With NavLink

Discussion