Gitlab Pages 和 React Router

Question

我将使用Gitlab Pages。似乎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();

- Aaron

---

你使用 HashRouter 还是 BrowserRouter？ - drinchev

我改用了HashRouter。它可以工作。谢谢。 - Aaron

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希望基础URL是https://{username}.gitlab.io/。 因此，你需要明确告诉ReactRouter关于basename。

404.html文件是必须的，以便允许用户直接导航到你的所有路由。没有它，GitLab不知道你的客户端路由在index.html中，将会提供默认的404页。

- Mo...

---

你知道吗，是否有可能将GitLab页面配置为某种“历史回退”模式，以便对于任何子路由都可以提供index.html？ - Victor Suzdalev

@VictorSuzdalev 点击链接。这个想法是GitHub Pages允许设置自定义404页面，并添加一个脚本来重定向到存在 index.html 的路由。 - Mo...

哇，谢谢！这个想法我没有想到过，但似乎正是我需要的！ - Victor Suzdalev

关于 package.json 文件中的 homepage 键，有什么问题吗？ - ValRob

非常聪明的解决方案。请注意，您可以将所有内容（包括404页面）重定向到索引，而不是复制索引：https://docs.gitlab.com/ee/user/project/pages/redirects.html#rewrite-all-requests-to-a-root-indexhtml。一条简单的命令 echo '/* /index.html 200' > public/_redirects 就能搞定。 - Boiethios