Limit Matching Between Path and the URL
Explore how to limit matching between URL paths and routes using the exact prop in React Router. Understand using the Switch component to render only the first matching route and learn how to add a 404 fallback route to improve routing control in React applications.
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 ...