Question

我在gh-pages上托管了一个个人网站，并且已经对其进行了部署等，并且一切似乎都工作正常。但是，我注意到路由器可以在主页上工作，也可以在单击指向其他页面的链接时工作，但是当我刷新URL或手动键入它时，路由器将无法工作。

我正在将React与到达路由器一起使用。我尝试对所有链接和路径使用array([[<matplotlib.axes._subplots.AxesSubplot object at 0x0000020AF0104630>, <matplotlib.axes._subplots.AxesSubplot object at 0x0000020AF48A4EF0>,。但是，这不能解决问题。

我的路由如下：

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页上有此文件，所以我不确定是否有等效文件！

有人有什么想法吗？我花了好几天的时间对此感到疑惑，并问了其他几个也无法解决的开发人员！

谢谢！

Answer 1

结果证明，在Google的大量帮助下，我想到了这一点。将此留给需要它的任何人！

我使用了这个包装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页不能使用正常的HTML5推送历史记录情况，因此我们必须使用哈希历史记录。由于到达路由器不支持此功能，因此有人请为其添加一个额外的库，瞧，它起作用了！多亏那个人！

Answer 2

我花了一段时间才弄明白（关于我有 <Router basename={process.env.PUBLIC_URL}>）对我有用的是将这些添加到 package.json

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

它修复了 gh-pages 刷新时的崩溃

到达路由器无法在gh页上刷新

2 个答案: