Gitlab Pages и React Router

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

/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;

источник/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();

gitlab reactjs react-router gitlab-pages
person Aaron    schedule 11.10.2017    source источник
comment
Вы используете HashRouter или BrowserRouter?   -  person drinchev    schedule 11.10.2017
comment
Я перешел на HashRouter. Оно работает. Спасибо.   -  person Aaron    schedule 11.10.2017

Ответы (1)


arrow_upward
10
arrow_downward

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

Также в .gitlab-ci.yml на этапе развертывания страницы добавьте в раздел script следующее:

- cp public/index.html public/404.html

Объяснение

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

404.html необходим для того, чтобы пользователь мог напрямую переходить ко всем вашим маршрутам. Без этого GitLab не знает, что маршрутизация на стороне клиента находится в вашем index.html и будет обслуживать страницу 404 по умолчанию.

person Mo K    schedule 07.12.2017
comment
Знаете ли вы, можно ли настроить страницы gitlab на какой-то режим «отката истории», чтобы index.html обслуживался для любого подмаршрута? - person Victor Suzdalev; 11.06.2018
comment
@VictorSuzdalev Перейдите по ссылке. Идея заключается в том, что GitHub Pages позволяет настроить пользовательскую страницу 404.html. И добавьте скрипт для перенаправления на маршрут, где существует index.html - person Mo K; 12.06.2018
comment
эй, спасибо! Эта идея не пришла мне в голову, но, похоже, это то, что мне нужно! - person Victor Suzdalev; 13.06.2018
comment
как насчет ключа домашней страницы в package.json? - person ValRob; 24.09.2019