Learn

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>

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?