React Router Quick Start Guide

The exact prop

In our previous <Route> example, let's change the '/home' route path to '/', as shown here:

<div className="container">     <Route         path="/"         component={HomeComponent}      />     <Route         path="/dashboard"         component={DashboardComponent}      /> </div>

With these routes in place, when the browser's URL is set to /dashboard, you'll notice that the content from both components is displayed as follows:

Inside Home routeInside Dashboard route

Here, the '/' in '/dashboard' matches both of the <Route> paths, '/' and '/dashboard' ; therefore it renders content from both the components. To match the browser's location.pathname exactly with the <Route> component's path, add the exact prop to the <Route>, as shown here:

.. <Route     path="/" component={HomeComponent} ...