, или же
(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
Функция do выполняет исключительно рендеринг первого маршрута, которому он соответствует, и общей проблемой в результате его пропуска является рендеринг обеих страниц одновременно. Если мой"/"
маршрут точный, тогда даже без коммутатора холодильник должен быть единственным подходящим маршрутом, верно? Почему он вообще не рендерится?