(react-router-dom
версия: 4.1.1)
У меня установлены рабочие маршруты, но я немного смущен тем, почему нужен <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
и пытаюсь щелкнуть ссылку "Холодильник", но ничего не происходит (FridgePage
не отображается), и никакая ошибка не выводится на консоль.
Как я понимаю, единственное, что делает Switch
, - это сделать только первый маршрут, который он соответствует, и общая проблема в результате его удаления - это отображение обеих страниц одновременно. Если мой маршрут "/"
точен, то даже без коммутатора, холодильник должен быть единственным маршрутом, который соответствует, верно? Почему это вообще не отображается?