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...