Маршрутизатор Reach не работает при обновлении на gh-страницах

Question

У меня есть личный веб-сайт, размещенный на gh-страницах, я его развернул и т. Д., И все, похоже, работало нормально.Однако я заметил, что маршрутизатор работает на домашней странице, а также при переходе по ссылкам на другие страницы, однако, когда я обновляю 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
},

однако, так как это в prod на 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-pages не могутиспользуйте обычную ситуацию истории push-кода в HTML5, поэтому мы должны использовать историю хешей.Так как reach-router не поддерживает это, кто-то любезно сделал для него дополнительную библиотеку, и вот, это работает!Спасибо этому человеку!