React router Switch behavior

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)