Exclusive routing with the <Switch> component

When a URL is presented to <BrowserRouter>, it will look for routes created with <Route> components and render all the routes that match the browser's URL path. For example, consider the following routes:

<Route
    path="/login"
    component={LoginComponent}
/>
<Route
    path="/:id"
    render={({ match }) => 
        <div> Route with path {match.url}</div>
    }
/>

Here, both the routes with the paths /login and /:id match the /login URL path. React-Router renders all the <Route> components that match the URL path. However, to render only the first matching route, the library provides the <Switch> component. The <Switch> component accepts a list of <Route> components as its children and it renders only the first <Route> that matches the...