Gitlab页面和React Router

Question

我将使用Gitlab页面。看来Gitlab Pages无法与React Router一起使用。我得到一个空白页。如何在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

同样.gitlab-ci.yml，在部署页面的阶段中的，在script部分中添加以下内容：

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

说明

如果您的项目名称为ABC，则gitlab页面的网址为，https://{username}.gitlab.io/ABC 但react router期望的基本网址为https://{username}.gitlab.io/。因此，您需要显式地告诉ReactRouter基本名称。

需要404.html才能允许用户直接导航到您的所有路线。没有它，GitLab将不知道您的客户端路由位于index.html中，并将提供默认的404页面。