Советы по React - Обработка 404 страниц

Обработка страниц 404 очень проста с помощью реактивного маршрутизатора. Давайте начнем. Сначала вам нужно создать новое приложение, я буду использовать шаблон create-react-app.

create-react-app react-router-404

После этого установите пакет response-router-dom и импортируйте некоторые компоненты в файл App.js.

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

Хорошо, теперь мы собираемся использовать тот же файл App.js для создания двух компонентов: Home и About.

const Home = () => (
   <h1>Hello guys! Let's deal with 404?</h1>
);
const About = () => (
   <h1>About this example....</h1>
);

Теперь давайте создадим несколько ссылок и маршрутов:

<BrowserRouter>
   <div>
      <p className="App-intro">
         <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
         </ul>
      </p>
      <Route path="/" exact component={Home}/>
      <Route path="/about" component={About}/>
    </div>
</BrowserRouter>

На данный момент у нас есть что-то вроде этого для домашнего компонента:

А это для компонента About:

А теперь давайте добавим еще одну ссылку на неизвестный маршрут:

<li><Link to="/more">More</Link></li>

Если вы нажмете эту ссылку, вам будет показана пустая страница, но правильной будет страница 404, верно? Итак, давайте создадим еще один компонент под названием Page404:

const Page404 = ({ location }) => (
   <div>
      <h2>No match found for <code>{location.pathname}</code></h2>
   </div>
);

Но как отрендерить Page404? Если мы визуализируем Маршрут, но не указываем путь, этот маршрут всегда будет отображаться, поэтому мы могли бы показать новый Маршрут без пути, который отображал бы страницу 404, верно?

<Route path="/" exact component={Home}/>
<Route path="/about" component={About}/>
<Route component={Page404} />

Теперь давайте обновим страницу и посмотрим, что мы получим:

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

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

Импортируйте его и используйте как родительский для маршрутизаторов:

<Switch>
   <Route path="/" exact component={Home}/>
   <Route path="/about" component={About}/>
   <Route component={Page404} />
</Switch>

Теперь все работает, очень просто!

Вы можете клонировать этот проект здесь: https://github.com/lblima/react-router-404

Это все, ребята,

Спасибо за прочтение!