將Create-React-App部署到github

Question

我很難將我的create-react-app應用程序部署到gh-pages。 我的目標網頁運行正常，但其他兩個頁面無法加載，並且出現404錯誤。 我找到了文檔，並且說gh-pages不支持使用HTML 5 pushState的路由器。 這是什么意思？如何使我的應用程序正常運行？

app.js：

import React, { Component } from 'react';
import {HashRouter, Switch, Route} from 'react-router-dom';
import Navigation from './Components/Navigation';
import Landing from './Components/Landing';
import ToiletInfo from './Components/ToiletInfo';
import Location from './Components/Location';
import {data} from './data';
import './App.css';

class App extends Component {
render() {

 return (
  <HashRouter>
    <Switch>
      <div className="App">
      <Navigation />
      <Route 
        exact path='/' 
        render={(props) => <Landing {...props} data={data} />}
        />
        <Route 
        exact path='/ToiletInfo' 
        render={(props) => <ToiletInfo {...props} data={data} />}
        />
        <Route 
        exact path='/Location' 
        render={(props) => <Location {...props} data={data} />}
        />
        {/* // <Landing data={data}/> */}
      </div>
    </Switch>
  </HashRouter>
);
}
}


export default App;

Answer 1

在大多數具有客戶端路由的單頁應用程序中，例如react-router您需要告訴服務器在路由不匹配的情況下提供/呈現index.html ，這在github頁面中是不可能的，您需要遵循以下https： //github.com/facebook/create-react-app/issues/1765 。

快遞示例：

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, '../build/index.html'));
});

但是您可以在這里找到其他用例： https : //angular.io/guide/deployment