将Create-React-App部署到github

Question

I am having a hard time deploying my create-react-app application to gh-pages. My landing page works just fine, but my two other pages dont load and I get a 404 error. I found the documentation and it says gh-pages doesnt support routers that use HTML 5 pushState. What does that mean and how can I get my application to work without any issues?

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

In most of the single page apps having client side routing like react-router you need to tell your server to serve/render index.html in case of unmatched routes, which is something not possible in github pages and you need to follow this https://github.com/facebook/create-react-app/issues/1765 .

Example for express:

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

But you can find another use cases here: https://angular.io/guide/deployment