Learn

In the React Router paradigm, the different views of your application, also called routes are just React components. To include them in your application, you will need to render them.

The first step is to make our router available to our entire application by using React Router’s RouterProvider.

import { RouterProvider, createBrowserRouter } from 'react-router-dom';
const router = createBrowserRouter( /* application routes are defined here */ );

export default function App () {
  return (
    <RouterProvider router={ router } />
  );
}

createBrowserRouter will define a router that prevents URL changes from causing the page to reload. Instead, URL changes will allow the router to determine which of its defined routes to render while passing along information about the current URL’s path as props. We make our router available application-wide by providing it using RouterProviderat the root of our application.

In the next exercises, we will learn how to define route components so they can make use of this information but for now, let’s add a router to our application.

Instructions

Task 1

To add routing to your application, in App.js, import RouterProvider and replace <p>REPLACE ME WITH A ROUTER PROVIDER</p> with a RouterProvider.

Hint

We can import modules from a package using the following syntax:

import { valueA } from 'package';

Task 2

Assign the <RouterProvider> component a router prop. Its value should be the previously defined router constant. Don’t worry about seeing a blank page if you run npm start. We’ll fix this in the next exercise when we configure our router.

Hint

At this point, the `App` component should return the following:

<RouterProvider router={ router } />

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?