Problem z routingiem na GH Pages po odświeżeniu strony

Cześć,
Z pewnym zdziwieniem zauważyłam, że po odświeżeniu strony zdeployowanej na GH Pages dzieją się dziwne rzeczy:
Jeżeli jest to strona pierwsza-literalnie pierwsza, na samej górze w routingu-odświeża się prawidłowo (=== wraca to, co było).
jeżeli jest to jakakolwiek inna strona dostaję błąd 404.
Ta sama apka działa normalnie (tzn. wszystkie strony zachowują się jak pierwsza) w środowisku produkcyjnym tzn u mnie na komputerze lokalnie.

Router jest używany tak:

const rootReducer = combineReducers({ books: booksReducer });
export const store = configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(saga).concat(thunk),
});

const AppProvider: React.FC = ({ children }) => {
    return (
        <Provider store={store}>
            <FiltersVisibilityContextProvider>
                <Router basename={process.env.PUBLIC_URL}>{children}</Router>
            </FiltersVisibilityContextProvider>
        </Provider>
    );
};

saga.run(rootSaga);

serviceWorker.register();
export default AppProvider;

natomiast App tak:

const IndividualBook = lazy(() => import('./Pages/IndividualBookPage'));
const LoadPage = lazy(() => import('./Pages/ConnectingPage'));

function App() {
    return (
        <Switch>
            <Route exact path={Paths.landing} component={Awaiting(StarWars)} />
            <Route exact path={Paths.search} component={Awaiting(Search)} />
            <Route exact path={Paths.books} component={Awaiting(Books)} />
            <Route exact path={Paths.not_found} component={Awaiting(NotFound)} />
            <Route exact path={Paths.connecting} component={Awaiting(Connecting)} />
            <Route exact path={Paths.error} component={Awaiting(Error)} />
            <Route exact path={Paths.individualBook} component={Awaiting(IndividualBook)} />
            <Route exact path={Paths.load} component={Awaiting(LoadPage)} />
        </Switch>
    );
}
export default App;

https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing

Żeby to naprawić w prosty sposób, możesz skorzystać z HashRouter'a, który zamieni wszystkie adresy z takiej postaci /user/settings/change-password na /#/user/settings/change-password

I to jest Proszę Państwa dobra odpowiedź ! Wyglądają teraz adresy trochę pokracznie ale działają :) a za to im płacę. Jedno pytanie, czy dobrze wnioskuję, że wynika to ze sposobu traktowania stron przez GH Pages specyficznie i gdzie indziej taki kod prawdopodobnie powinien chodzić bez problemu?

Doctanna napisał(a):

Jedno pytanie, czy dobrze wnioskuję, że wynika to ze sposobu traktowania stron przez GH Pages specyficznie i gdzie indziej taki kod prawdopodobnie powinien chodzić bez problemu?

Tak

Problem polega na tym, że aplikacja Reacta, która jest typowym SPA (jest zbudowana jedynie z jednego index.html + CSS/JS) zostaje załadowana tylko na głównym adresie /. Jeśli przejdziesz na dowolny inny adres /user/settings i odświeżysz stronę to GH nie będzie wiedział, że ma ponownie wczytać index.html z głównego katalogu, a raczej nie można ustawić żadnego przekierowania, albo tego zmienić w przypadku GH.

Jeśli hosting pozwala nam na użycie backendu to już nie ma takiego problemu, bo w dowolnym języku możesz sobie ustawić routing na których adresach ma zostać to wczytane.