reactjs – React路由器切换行为

我有工作路线设置,但我有点困惑为什么< Switch>是必要的：

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

我曾经有一个div包裹路由而不是Switch.在这种情况下,我看到App呈现并尝试单击Fridge链接,但没有任何反应(FridgePage未呈现),并且没有错误输出到控制台.

据我所知,Switch所做的唯一事情是专门渲染它匹配的第一条路径,而省略它的常见问题是同时渲染两个页面.如果我的“/”路线是准确的,那么即使没有Switch,冰箱也应该是匹配的唯一路线,对吗？为什么它根本不渲染？