Gitlab页面和ReactRouter

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

    
    
  
);

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(
  
    
  ,
  document.getElementById('root')
);
registerServiceWorker();

Mo K.. 5

HashRouter是一种解决方案。但是，您仍然可以使用BrowserRouter

简短答案

// In your src/index.js,

    

对于环境变量，打开您的.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页面。

1> Mo K..：

---

HashRouter是一种解决方案。但是，您仍然可以使用BrowserRouter

简短答案

// In your src/index.js,

    

对于环境变量，打开您的.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页面。

---

@VictorSuzdalev跟随[链接]（https://github.com/rafrex/react-github-pages）。这个想法是GitHub Pages允许设置自定义404.html页面。并添加脚本以重定向到存在index.html的路由