Gitlabページと反応ルータ

Question

私は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; 

の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 

説明

プロジェクト名がABCであれば、 gitlabページのURLはhttps://{username}.gitlab.io/ABC なる。しかし、ルータはベースURLがhttps://{username}.gitlab.io/ことを期待反応するであろう。 したがって、ReactRouterにベース名を明示的に伝える必要があります。