将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