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 route
Inside 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}
     exact
 />
 ..

Similarly, when you try to access the '/dashboard' and '/dashboard/portfolio' paths, you'll notice that in both instances, DashboardComponent is rendered. To prevent '/dashboard/portfolio' from matching the <Route> component with the '/dashboard' path, add the exact prop.