2

Создаю веб-сайт и сейчас столкнулся с такой проблемой, что при переходе на другие страницы собственно по URL например: https://jintropine.kz/thanks выдается ошибка 404, такое же происходит и при перезагрузке страницы, использую React Router. На страницы можно нормально попасть только после клика по кнопкам на самом сайте.

Код:

import React from "react";
import ReactDOM from "react-dom/client";
import { Suspense } from "react";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Routes, Route } from "react-router-dom";

// Screens
import MainScreen from "./screens/MainScreen";

// Fonts
import "/node_modules/flag-icons/css/flag-icons.min.css";
import "rc-dropdown/assets/index.css";

// Styles
import "./styles/navigation-styles/navigation_styles.css";

// React GA
import ReactGA from "react-ga";

// Languages
import "./i18n";
import MoreInfo from "./pages/MoreInfo";
import Thanks from "./pages/Thanks";

const TRACKING_ID = "UA-262477863-1";
ReactGA.initialize(TRACKING_ID);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Suspense fallback="loading">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/information" element={<MoreInfo />}></Route>
          <Route path="/thanks" element={<Thanks />}></Route>
        </Routes>
      </BrowserRouter>
    </Suspense>
  </React.StrictMode>
);

Нужно чтобы страница существовала постоянно и была доступна по URL и после перезагрузки, подскажите пожалуйста что делать

2 ответа 2

1

Если статику отдает express или nginx, то самым простым вариантом будет вместо BrowserRouter использовать HashRouter

4
  • Я пытался уже использовать HashRouter, не получилось, я просто создал веб-сайт и залил его на хостинг, как узнать какие технологии там используются? Commented 21 апр. 2023 в 15:51
  • react-router 5 версии?
    – Илья
    Commented 21 апр. 2023 в 16:09
  • Нет, шестой версии Commented 21 апр. 2023 в 17:01
  • @RuslanMakhmatov 1:попробуй в BrowserRouter добавить basename="протокол://сайт.кз", если не ошибаюсь должно помочь, но HashRouter тоже должен был сработать, странно что не помогло. PS(я месяца 5 не трогал роутинг, так что может и не сработать). Да еще через createBrowserRouter можеш попробовать, в доках описано что как.
    – Armen
    Commented 21 апр. 2023 в 18:51
1

Это означает, что ваш сервер не поддерживает SPA и потому вам показывается 404 при обновлении страницы или же при ручном наборе сслыки

У меня была такая же проблема, когда я пытался React приложение хостить на GitHub Pages

Немного погуглив наткунлся на эту статью на GitHub-е. Там, конечно, советы и примеры для GitHub Pages, но я думаю вы поймёте как адаптировать под свои нужды

Single Page Apps for GitHub Pages

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.