Вирішено: сторінка перезавантаження маршрутизатора React не знайдена

Основна проблема, пов’язана з React Router reload page not found, полягає в тому, що коли користувач оновлює сторінку, браузер намагатиметься зробити запит до сервера для поточної URL-адреси. Однак, оскільки React Router виконує маршрутизацію на стороні клієнта, для URL-адреси немає відповідного серверного маршруту, тому повертається помилка 404 Not Found. Це може бути особливо проблематично, якщо користувачі очікують, що певний вміст з’явиться під час оновлення.

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// Рядок 1: цей рядок імпортує компоненти BrowserRouter, Route і Switch з бібліотеки react-router-dom.

// Рядок 3: цей рядок визначає функцію під назвою App, яка повертає код JSX.

// Рядок 5: цей рядок обертає весь код JSX у компонент Router із react-router-dom.

// Рядок 6: цей рядок обертає всі маршрути в компоненті Switch із react-router-dom.

// Рядки 7–9: ці рядки визначають два маршрути для '/' і '/about' відповідно з їхніми відповідними компонентами (Home і About).

// Рядки 11–12: ці рядки визначають маршрут, коли інші маршрути не відповідають, що відображає тег h1 із повідомленням «Сторінку не знайдено».

Помилка сторінки не знайдено

Помилка «Сторінка не знайдена» в React Router — це помилка, яка виникає, коли користувач намагається отримати доступ до сторінки або маршруту, який не існує. Це може статися, якщо користувач неправильно ввів URL-адресу або якщо сторінку, до якої він намагається отримати доступ, видалено чи переміщено. У React Router ця помилка обробляється за допомогою атрибут рендерингу компонента та передача функції, яка повертає сторінку 404. Це дозволяє розробникам створювати власні сторінки 404 із будь-яким вмістом, яким вони хочуть, наприклад корисними посиланнями чи повідомленням із вибаченнями.

Як обробляти Сторінку не знайдено в маршрутизаторі React

Використовуючи React Router, ви можете обробити сторінку, яку не знайдено, створивши спеціальний маршрут, який відображатиме компонент NotFound, якщо URL-адреса не відповідає жодному з існуючих маршрутів. Для цього вам потрібно створити новий маршрут зі шляхом, встановленим у «*», і відобразити ваш компонент NotFound.

Наприклад:

} />

Це відповідатиме будь-якій URL-адресі, яка ще не відповідає існуючому маршруту, і відтворюватиме ваш компонент NotFound.

Як примусово перезавантажити сторінку, що реагує

У React Router ви можете примусово перезавантажити сторінку за допомогою методу replace в об’єкті history. Це замінить поточний запис у стеку історії на новий, таким чином примусово перезавантаживши сторінку. Щоб скористатися цим методом, спочатку потрібно отримати доступ до об’єкта історії. Ви можете зробити це, передавши його як проп під час створення компонента маршрутизатора:

const AppRouter = () => (

{/* Ваші маршрути тут */}

);

Отримавши доступ до об’єкта історії, ви можете використовувати його метод заміни таким чином:

history.replace('/some-route');