Как реализовать 404 страницу в React

Зачем нужна 404 страница и как она работает

404 страница появляется, когда пользователь пытается перейти на несуществующий маршрут. Вместо стандартного "Page not found", который может выглядеть скучно, вы можете сделать страницу, которая объяснит проблему и предложит решение, например, ссылку на главную страницу.

В React маршруты определяются с помощью react-router-dom. Этот пакет управляет переходами между страницами и помогает обработать случаи, когда пользователь попадает на неправильный маршрут. Чтобы создать 404 страницу, вам нужно добавить маршрут, который отобразится, если другие маршруты не подходят.

Пример настройки маршрутов с 404 страницей:

import React from "react";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";



function Home() {

  return <h1>Home Page</h1>;

}



function About() {

  return <h1>About Page</h1>;

}



function NotFound() {

  return <h1>404 - Page Not Found</h1>;

}



export default function App() {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

        <Route path="*" element={<NotFound />} />

      </Routes>

    </Router>

  );

}

1. Основные страницы, такие как главная или страница "О нас", получают свои маршруты с определёнными путями (/ или /about).
2. 404 страница назначается маршруту *, который срабатывает, если ни один другой маршрут не подходит.

Улучшение пользовательского опыта на 404 странице

Простое сообщение "Страница не найдена" не всегда помогает пользователю. Подумайте о добавлении полезных функций:

1. Ссылка на главную страницу, чтобы пользователь мог начать с нового поиска.

2. Кнопка "Назад", чтобы вернуться на предыдущую страницу.

3. Весёлый дизайн или иллюстрация, чтобы 404 страница выглядела менее пугающей.

Пример с улучшенным дизайном 404 страницы:

import React from "react";

import { useNavigate } from "react-router-dom";



function NotFound() {

  const navigate = useNavigate();



  return (

    <div style={{ textAlign: "center", marginTop: "50px" }}>

      <h1>Oops! 404 - Page Not Found</h1>

      <p>We couldn't find the page you were looking for.</p>

      <button onClick={() => navigate("/")}>Go to Home</button>

      <button onClick={() => navigate(-1)}>Go Back</button>

    </div>

  );

}



export default NotFound;

1. Использование useNavigate из react-router-dom позволяет динамически управлять переходами, как, например, возвращение на предыдущую страницу.
2. Добавление стилей через style или CSS делает страницу более привлекательной.

Советы по улучшению SEO и функциональности

404 страница не должна быть "тупиком" для поисковых систем и пользователей. Вот что можно сделать, чтобы сделать её полезной:

1. Добавьте поиск по сайту. Если пользователь не нашёл нужное, дайте ему возможность искать информацию прямо на 404 странице.

2. Используйте понятный заголовок. Поисковые системы распознают 404 страницы по заголовкам и статусу ответа сервера, поэтому убедитесь, что страница отдаёт правильный код ошибки.

Пример работы с заголовком страницы и кодом статуса:

import React, { useEffect } from "react";



function NotFound() {

  useEffect(() => {

    document.title = "404 - Page Not Found";

  }, []);



  return (

    <div style={{ textAlign: "center", marginTop: "50px" }}>

      <h1>404 - Page Not Found</h1>

      <p>The page you are looking for doesn't exist.</p>

    </div>

  );

}



export default NotFound;

1. Использование useEffect для обновления заголовка страницы делает её понятной как для пользователей, так и для поисковых систем.
2. Не забудьте настроить сервер для возвращения правильного статуса 404, если вы работаете с SSR (Server-Side Rendering).