Реакция маршрутизатора

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

Ответ 1

<Switch> возвращает только один первый соответствующий маршрут.

exact возвращает любое количество точно совпадающих маршрутов.

Например:

<Switch>
  <Route exact path="/animals" component={Animals} />
  <Route path="/animals/fish" component={Fish} />
  <Route component={Missing} />
</Switch>
<Route path="/animals" component={Order} />

Если отсутствующий компонент не находится внутри <Switch>, он будет возвращаться на каждом отдельном маршруте.

exact, маршрут "/animals" не будет перехватывать все маршруты, содержащие "/animals", такие как "animals/fish".

Без exact, маршрут "/animals/fish" также вернет компонент Fish для "animals/fish/cod", "/animals/fish/salmon" и т.д.

Находясь вне оператора <Switch> и без exact, компонент Order отображается на каждом пути, содержащем "/animals".


Обычно, если вы не используете точный, вы использовали бы подстановочный знак, чтобы вы не возвращали случайные страницы.

Ответ 2

Я попытался запустить ваш код с помощью Switch, а также теги div, обертывающие маршруты. Оба дают одинаковые ожидаемые результаты (FridgePage получается для div, а также для Switch). Не могли бы вы еще раз проверить это?

Ответ 3

То же, что @Saurabh_Gour. Он работает с div как ожидалось...