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 RouterProvider
at 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 } />