React Router V4 switch vs div? [duplicate]

Question

I have seen various examples saying that when using React Router V4, you can wrap your <Route /> components in either a <Switch> component provided by React Router, or you can use any other element to contain your routes (such as a <div>).

What is the difference between these two approaches?

Examples:

<BrowserRouter>
  <div>
    <Route exact path="/login" component={LoginScreen} />
    <Route path="/loading" component={LoadingScreen} />
  </div>
</BrowserRouter>

VS

<BrowserRouter>
  <Switch>
    <Route exact path="/login" component={LoginScreen} />
    <Route path="/loading" component={LoadingScreen} />
  </Switch>
</BrowserRouter>

Answer 1

<Switch/> components will only show the first matched child <Route/> for any given path. Other configs will show all matches.