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 components, which was the case previously.
Where exactly you place this prop in JSX is not important. We could place it just before the path prop to let it speak for itself: “Here’s a route that matches an exact path ...