Reactjs 到达路由器无法刷新gh页面

我有一个在gh页面上托管的个人网站，并且已经部署了它，等等，所有这些看起来都很好。 然而，我注意到路由器在主页上工作，并且在单击指向其他页面的链接时也工作，但是当我刷新url或手动键入url时，它不工作

我正在使用React with reach路由器。我已尝试将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;

但是，由于这是gh页面上的prod，我不确定是否有等价物

有人有什么想法吗？我已经花了好几天的时间思考这个问题，并询问了其他几个开发人员，他们也不能解决这个问题

---

提前谢谢

结果是，我在谷歌的帮助下找到了这个答案。把这个留给任何需要它的人

我用了这个包裹

然后就这样做了:

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页面似乎不能使用正常的HTML5推送历史情况，所以我们必须使用哈希历史。由于reach路由器不支持此功能，所以有人为它创建了一个额外的库，瞧，它工作了！感谢那个人

结果是，我在谷歌的帮助下找到了这个答案。把这个留给任何需要它的人

我用了这个包裹

然后就这样做了:

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页面似乎不能使用正常的HTML5推送历史情况，所以我们必须使用哈希历史。由于reach路由器不支持此功能，所以有人为它创建了一个额外的库，瞧，它工作了！感谢那个人

太好了，谢谢你。我相信有很多方法可以实现404重定向或使用react路由器，但我喜欢这个简单的解决方案。非常好，谢谢。我相信有很多方法可以实现404重定向或使用react路由器，但我喜欢这个简单的解决方案。