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.