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

【问题标题】：Reach router not working on refresh on gh-pages到达路由器无法在 gh 页面上刷新
【发布时间】：2018-11-24 17:33:24
【问题描述】：

我有一个托管在 gh-pages 上的个人网站，并且已经部署了它等等，一切似乎都运行良好。但是我注意到路由器在主页上以及单击其他页面的链接时也可以正常工作，但是当我刷新 url 或手动输入时，它不起作用。

我正在使用 React 和到达路由器。我尝试将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 上的产品，我不确定是否有等价物！

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

提前致谢！

【问题讨论】：

标签： reactjs github-pages reach-router

【解决方案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 不支持此功能，因此有人为它制作了一个额外的库，瞧，它可以工作了！感谢那个人！

【讨论】：

太好了，谢谢。我相信有办法进行 404 重定向或使用反应路由器，但我喜欢这个简单的解决方案。

【解决方案2】：

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

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

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

【讨论】：