Limit Matching Between Path and the URL
Learn how to return the Route if the path is an exact match to the current URL, and also how to render only the first Route that matches the URL rather than rendering all matching Routes.
We'll cover the following...
Limit matching with props
To limit the matching between the path and the URL, React Router provides an exact prop on the Route component. If this Boolean prop is provided, the Route is only rendered if the path prop exactly matches the current URL. Let’s look at an example:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
require('./style.css');
ReactDOM.render(
<App />,
document.getElementById('root')
);
We can see that this time only the Home component renders instead of both the Home and Account ...