In the React Router paradigm, the different views of your application, also called routes, along with the Router
itself, are just React components. To include them in your application, you will need to render them.
The first step is to render a Router
component as the top-level component in your application.
import { BrowserRouter as Router } from 'react-router-dom'; export default function App () { return ( <Router> /* Application views are rendered here */ </Router> ); }
Making Router
the top-level component prevents URL changes from causing the page to reload. Instead, URL changes will allow the Router
to determine which of its child components to render while passing along information about the current URL’s path as props.
In the next exercises, you will see how the children of the Router
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, replace the <div>
component which currently surrounds the entire application’s contents with a Router
component.
Hint
At this point, the `App` component should return the following:
<Router> <Header /> <main> {/* Add Routes here! */} </main> <Footer /> </Router>