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 <Switch> was necessary:

index.js

import React from 'react'; import { HashRouter, Route, Switch } from 'react-router-dom';  import App from './components/App.jsx'; import FridgePage from './components/FridgePage.jsx';  ReactDOM.render(     <HashRouter>         <Switch>             <Route exact path="/" component={App} />             <Route path="/fridge" component={FridgePage} />         </Switch>     </HashRouter>,     document.getElementById('root') ) 

App.jsx

import Header from './Header.jsx'; import {Link} from 'react-router-dom';  export default class App extends React.Component {     render() {         console.log(this.props);         return (             <div>                 <h1>Herbnew</h1>                 <Link to="fridge">Fridge</Link>                 {this.props.children}             </div>         );     } } 

FridgePage.jsx

import React from 'react';  export default class FridgePage extends React.Component {     render() {         return (             <div>                 <h1>Fridge</h1>                 You finally found the fridge!             </div>         );     } } 

I used to have a div wrapping the routes instead of a Switch. In that case, I see the App rendered and try to click the Fridge link, but nothing happens (the FridgePage isn't rendered), and no error is output into the console.

As I understand it, the only thing the Switch does is exclusively render the first route it matches, and the common problem as a result of omitting it is rendering both pages at once. If my "/" route is exact, then even without the Switch, the Fridge should be the only route that matches, right? Why does it not render at all?

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.