React router Switch behavior

Question

(react-router-dom version: 4.1.1)

I have working routes set up, but I\'m a bit confused about why the was necessary:

Answer 1

<Switch> returns only one first matching route.

exact returns any number of routes that match exactly.

For example:

<Switch>
  <Route exact path="/animals" component={Animals} />
  <Route path="/animals/fish" component={Fish} />
  <Route component={Missing} />
</Switch>
<Route path="/animals" component={Order} />

If the Missing component was not inside a <Switch>, it would be returned on every single route.

With exact, the "/animals" route will not catch every route containing "/animals" such as "animals/fish".

Without exact, the "/animals/fish" route will also return the Fish component for "animals/fish/cod", "/animals/fish/salmon", etc.

Being outside the <Switch> statement and without exact, the Order component is rendered on every path containing "/animals".

---

Usually, if you're not using exact you would use a wildcard, so you don't return random pages.