Réagir routeur Commutateur comportement

(react-router-dom version: 4.1.1)

J'ai des parcours de travail mis en place, mais je suis un peu confus au sujet de pourquoi les <Switch> était nécessaire:

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>
        );
    }
}

J'ai utilisé un div envelopper les routes au lieu d'un Switch. Dans ce cas, je vois la App rendus et essayez de cliquer sur le Réfrigérateur lien, mais rien ne se passe (le FridgePage n'est pas rendu), et aucune erreur n'est sortie dans la console.

Si je comprends bien, la seule chose que l' Switch n'est exclusivement rendu de la première voie de correspondance, et de la commune de problème résultant de l'omission c'est le rendu de deux pages à la fois. Si mon "/" route est exact, alors, même sans le Switch, le Réfrigérateur doit être la seule voie qui correspond, droite? Pourquoi n'est-il pas rendu à tous?

OriginalL'auteur Jess | 2017-07-15