Когда разрабатывается приложение ReactJS, большинство из нас сталкивается с требованием отображать страницу 404 для всех недопустимых путей. С такими фреймворками, как AngularJS, достаточно просто добавить еще один маршрут с подстановочным знаком в виде двойной звездочки (**). Но с хеш-маршрутизацией ReactJS все немного по-другому, и давайте посмотрим, как это можно сделать.

В этой статье давайте рассмотрим очень простое приложение React только с одним компонентом, обеспечивающим вход в систему. Когда пользователь получает доступ к пути /#/login, этот компонент входа должен отображаться. Для этого мы можем определить конфигурацию нашего маршрутизатора следующим образом.

<HashRouter>
    <Route exact path="/login" component={LoginComponent}/>
</HashRouter>

Теперь давайте попробуем использовать недопустимый хэш-маршрут, такой как /#/invalid/, и посмотрим, что произойдет.

Ой! 😕 Переход по недопустимому пути отображает пустую страницу без каких-либо компонентов. Итак, как мы можем исправить это, чтобы показать компонент, который отображает сообщение 404?

Шаг 1 — Добавление маршрута без пути

Первым шагом для достижения ожидаемого поведения является добавление маршрута без пути, который отображает компонент 404. Тогда новая конфигурация маршрутизатора будет выглядеть так, как показано ниже.

<HashRouter>
    <Route exact path="/login" component={LoginComponent}/>
    <Route component={My404Component}/>
</HashRouter>

Теперь, если мы перезагрузим наш неверный путь, мы получим нашу красивую страницу 404.

Итак, мы достигли своей цели, не так ли? Чтобы быть уверенным, давайте вернемся на нашу страницу входа и посмотрим, есть ли она уже там.

Ой! Теперь у нас есть компонент 404, отображаемый не только для недопустимых путей, но и для допустимых путей. Давайте посмотрим, почему.

Когда мы добавляем маршрут без пути, этот маршрут соответствует каждому пути. Из-за этого он будет отображать свой компонент со всеми другими путями в дополнение к компонентам, специфичным для этого пути.

Итак, что мы должны сделать, чтобы сообщить маршрутизатору React, что он должен отображать только этот путь, если только другой соответствующий путь не найден.

Шаг 2 — Переключение маршрутов

Для этого мы можем использовать компонент switch, поставляемый с React Router, внутри Hash Router, как показано ниже.

import {Switch} from "react-router-dom"

<HashRouter>
  <Switch>
    <Route exact path="/login" component={LoginComponent}/>
    <Route component={Temp404Component}/>
  </Switch>
</HashRouter>

Когда этот коммутатор используется, он будет отображать только первый соответствующий маршрут, поэтому для допустимых маршрутов будет отображаться только соответствующий компонент, а для всех недопустимых маршрутов будет отображаться компонент 404.

Призыв к действию

  • Аплодисменты. Поблагодарите и дайте другим найти эту статью.
  • Комментарий. Поделитесь своим мнением об этой статье.
  • Следуй за мной. Udith Gunaratna, чтобы получать новости о подобных статьях.
  • Поддерживайте связь. LinkedIn, Твиттер

Первоначально опубликовано на http://www.udith.me 24 июня 2019 г.