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页面网址为https://{username}.gitlab.io/ABC 但是，react路由器期望基本网址为https://{username}.gitlab.io/。 因此，您需要明确告诉ReactRouter有关基本名称。