Gitlab頁面和反應路由器

Question

我將使用Gitlab頁面。看來Gitlab Pages不能與React Router一起使用。我得到一個空白頁面。我如何使用gitlab Pages和react Router？ 我該如何解決這個問題？

/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關於基本名稱。