Почему ошибка 404 при переходе на страницы?

Question

[Alexander3928]

Есть небольшой проект на ReactJS. Для маршрутизации использую React Router Dom v6. Название репозитории у меня demo-pages, когда перехожу на другие страницы последний url меняется на название ссылки. В коде ниже варианты которые я пробовал.

<Routes>
        <Route path="demo-pages/catallog" element={<CatallogPage />}/>
        <Route path="/demo-pages/catallog/demo-1" element={<HomePage/>}/>
        <Route path="./contact" element={<ContactPage />}/>
        <Route path="/404" element={<NotFoundPage />}/>
      </Routes>

<nav className={styles.nav}>
      <ul className={styles.menu}>
        <li className={styles.menu__item}><NavLink to="/catallog" className={styles.menu__link}>Catallog</NavLink></li>
        <li className={styles.menu__item}><NavLink to="/demo-pages/404" className={styles.menu__link}>404</NavLink></li>
        <li className={styles.menu__item}><NavLink to="./contact" className={styles.menu__link}>Contact Us</NavLink></li>
      </ul>
    </nav>

Пример: было сайт/demo-pages стало сайт/catallog. Получаю ошибку 404, при перезагрузке страницы.
Были варианты указать ссылку, чтобы название страницы было после слова demo-pages сайт/demo-pages/catallog, но ошибка тоже 404. У меня на локальном компьютере все работает как нужно. Такая проблема только при деплое на GitHub.
С тегами могу ошибаться, не знаю где копать решение.
Сайт https://alexanderokhotnichenko.github.io/demo-pages/

Comments

[Kentavr16]

А сам узел DOM в который рендерится реакт вы обернули в BrowserRouter?

[Alexander3928]

Kentavr16, Конечно.

[Александр]

Kentavr16, Alexander3928, Какой BrowserRouter? Он работает с History-режимом, который не работает на GitHub Pages. Использовать только это https://reactrouter.com/en/main/router-components/... на GitHub Pages.

[Alexander3928]

Александр, О спасибо, ваш вариант помог. Давно искал решение. Сделайте пожалуйсто как ответ, чтобы я мог вас отметить.

Answer 1

[Александр]

При публикации веб-приложений на GitHub надо использовать Hash-роутинг, т.к. History-роутинг требует специфической настройки сервера. Для React необходимо использовать HashRouter.