Давайте сначала пройдемся по основам.

404 Не Найдено! Это один из кодов состояния http в разделе 4xx. Раздел 4xx посвящен ошибкам клиента. Мы получаем код состояния 404 в http-запросе, когда конкретная страница не найдена.

Итак, нам нужно будет отобразить ошибку 404, чтобы сообщить пользователю (клиенту), что запрошенная страница не найдена. Это означает, что он либо не определен, либо временно отключен.

В продолжение моего последнего поста (его можно прочитать здесь) нам нужно определить маршрут, который обрабатывает 404 ошибки. Мы изменим тот же код, что и в моем последнем посте, чтобы выполнить нашу задачу.

Требуемые модули NPM: react-router-dom

Примечание. Мы будем использовать шаблон React, используемый в этом репозитории GitHub. Кроме того, в этом примере используется JSX. Инструмент Babel компилирует JSX, используемый в этом примере.

Шаг 1: Создайте маршрут для отображения компонента PageNotFound.

<Route component={ PageNotFound } />

Этот маршрут не содержит маршрут пути. Что из этого понимает React? Согласно React, если свойство пути не определено, мы стремимся получить совпадение для любого запрошенного значения пути. В результате связанный компонент визуализируется. Это близко к тому, чего мы хотим добиться, т. е. отобразить ошибку 404 для всех неопределенных маршрутов.

Шаг 2: Создайте компонент PageNotFound.

at the end of a;const PageNotFound = () => (
    <div>
        You have reached 404!!
    </div>
);

Для простоты мы определяем функциональный компонент без сохранения состояния в том же app.js.

Шаг 3: Используйте компонент Switch, предоставленный нам модулем React Router. 3.a Для этого все, что нам нужно сделать, это импортировать компонент Switch.

import { BrowserRouter, Route, Switch } from 'react-router-dom';

3.b Мы используем этот компонент внутри компонента BrowserRouter. Мы заменим div на Switch.

<BrowserRouter>
    <Switch>
        <Route path='/' component={ LandingPage } exact={true} />
        <Route path='/edit' component={ EditPage } />
        <Route component={ PageNotFound } />
    </Switch>
</BrowserRouter>

Функциональность модуля Switch аналогична функции переключателя ON/OFF. Он проверяет совпадение пути и включает только совпадающий путь. Он отключает пути, которые не совпали. Лучший аспект компонента Switch заключается в том, что он не проверяет дальше совпадающего пути. Таким образом, если какой-то неопределенный маршрут говорит «/abc», он будет проверять совпадение со всеми определенными совпадениями. Здесь мы не получаем совпадения ни с одним из маршрутов. Но Switch будет соответствовать маршруту 404, потому что его путь не определен. Следовательно, мы можем отобразить нашу ошибку 404, если в определенных путях нет совпадений. Важно понимать, что определение пути ошибки 404 происходит после всех других определений маршрута. В противном случае переключатель всегда будет включаться, как только он проверит маршрут 404. Другими словами, любой маршрут, определенный после маршрута 404, не отображается на экране.