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

Answer 2

Мне потребовалось время, чтобы сообразить (относительно того, что у меня <Router basename={process.env.PUBLIC_URL}>) Что сработало для меня, так это добавление их в package.json

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

Исправлены сбои при обновлении gh-страниц.