Почему не отображает компонент | react-router-dom?

Question

[Yulia Khavaeva]

Я новичок в реакте.
Почему когда запускаю проект на локалхосте все отображается, а когда уже делаю билд просто ничего не отображается? Почитала в интернете, что возможно у меня могут быть ошибки в роутинге. Простите, если вопрос не корректный, заранее спасибо

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Homepage from './components/Homepage'
import Exercisepage from './components/Exercisepage'
import Loginpage from './components/Loginpage'

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Loginpage />} />
          <Route path="/exercises" element={<Homepage />} />
          <Route path="/exercise" element={<Exercisepage />} />
        </Routes>
      </BrowserRouter>
    </>
  )
}

export default App

Comments

[Александр]

Билд делаете на GitHub Pages?

[Yulia Khavaeva]

Александр, да

[Александр]

Yulia Khavaeva, Надо настроить префикс при сборке. Используете Vite?

[Yulia Khavaeva]

Александр, да, а где находится этот префикс?

[Александр]

Yulia Khavaeva, https://vitejs.dev/guide/static-deploy.html#github... первый пункт.

[Yulia Khavaeva]

Александр, спасибо большое! Буду пробовать, напишу потом заработало или нет

[Александр]

Yulia Khavaeva, Вот пример https://github.com/Seasle/cistercian/blob/main/vit..., https://github.com/Seasle/cistercian/blob/main/.gi...

[Yulia Khavaeva]

Александр, спасибо, то что вы скинули помогло, все заработало!

Answer 1

[Александр]

Для деплоя приложения на GitHub Pages необходимо корректно настроить Vite/Webpack.
Для Vite необходимо указать base - пример.
Для Webpack необходимо указать homepage.
Также вот пример настройки автоматического деплоя на GitHub Pages.