6

我将使用 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();
4

1 回答 1

13

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 页面 url 将是https://{username}.gitlab.io/ABC 但是，react router 期望基本 url 是https://{username}.gitlab.io/. 因此，您需要明确告诉 ReactRouter 基本名称。

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

于 2017-12-07T05:39:03.643 回答