Gitlab Pages и React Router

Question

Я буду использовать Gitlab Pages. Похоже, что Gitlab Pages не работает с React Router. Я получаю пустую страницу. Как я могу использовать gitlab Pages с реагирующим маршрутизатором? Как я могу решить эту проблему?

/src/App.js

import React from 'react';
import { Route } from 'react-router-dom';
import HomePage from './components/pages/HomePage';
import LoginPage from './components/pages/LoginPage';

const App = () => (
  <div>
    <Route path="/" exact component={HomePage} />
    <Route path="/login" exact component={LoginPage} />
  </div>
);

export default App;

SRC /index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
registerServiceWorker();

Answer 1

HashRouter является одним из решений. Но вы все еще можете использовать BrowserRouter

Короткий ответ

// In your src/index.js,
<BrowserRouter basename={process.env.PUBLIC_URL}>
    <App />
</BrowserRouter>

А для переменной среды откройте .gitlab-ci.yml и добавьте следующее.

variables:
    PUBLIC_URL: "/your-project-name" # slash is important

объяснение

Если название вашего проекта ABCURL-адрес страницы gitlab будет https://{username}.gitlab.io/ABCНо реагирующий маршрутизатор ожидает, что базовый URL будет https://{username}.gitlab.io/, Итак, вам нужно явно сообщить ReactRouter о базовом имени.