到达路由器不能在gh页面上进行刷新

Question

我有一个个人网站托管在高页面上，并已部署它等，一切似乎都很好。然而，我注意到，路由器在主页上工作，也在点击其他页面的链接时工作，但是当我刷新url或手动键入它时，它不工作。

我正在使用React和reach-router。我已经尝试将process.env.PUBLIC_URL与我所有的链接和路径一起使用。然而，这并不能解决问题。

我的路由如下：

import React, { Component } from 'react';
import { Router } from "@reach/router";
import Home from './containers/Home';
import About from './containers/About';
import './scss/main.scss'
import Nav from './components/Nav';
import Work from './containers/Work';
import Footer from './components/Footer';

class App extends Component {
    render() {
        return (
            <div>
                <Nav/>
                <main className="wrapper">
                    <Router>
                        <Home path="/"/>
                        <About path="/about"/>
                        <Work path="/work"/>
                    </Router>
                </main>
                <Footer/>
            </div>
        );
    }
}

export default App;

当我在本地遇到这个问题时，我通过执行以下操作来修复它

devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, 'public'),
    port: 9000
},

然而，由于这是在gh-pages上发现的，我不确定是否有等同的！

有谁有什么想法吗？我花了几天的时间想知道这一点，并询问了其他几个开发人员，他们也不能解决这个问题！

提前感谢！

Answer 1

所以事实证明，我在谷歌的帮助下找到了这个问题。把这个留给任何需要它的人！

我使用了这个包https://www.npmjs.com/package/hash-source

然后这样做：

import React, { Component } from 'react';
import Home from './containers/Home';
import About from './containers/About';
import './scss/main.scss'
import Nav from './components/Nav';
import Work from './containers/Work';
import Footer from './components/Footer';
import {
    createHistory,
    LocationProvider,
    Router
  } from "@reach/router";
  import createHashSource from 'hash-source'

  let source = createHashSource();
  let history = createHistory(source)

class App extends Component {
    render() {
        return (
            <LocationProvider history={history}>
                <div>
                    <Nav/>
                    <main className="wrapper">
                        <Router>
                            <Home path="/"/>
                            <About path="/about"/>
                            <Work path="/work"/>
                        </Router>
                    </main>
                    <Footer/>
                </div>
            </LocationProvider>
        );
    }
}

export default App;

基本上，gh-pages似乎不能使用正常的HTML5推送历史情况，所以我们必须使用散列历史。因为reach-router不支持这个，所以有人好心为它做了一个额外的库，瞧，它起作用了！感谢那个人！

Answer 2

"build": "react-scripts build && cp build/index.html build/404.html",

它修复了gh页面刷新时的崩溃