React Router v4: не удается загрузить страницу на страницах GitHub

Question

Локально я могу просматривать / кнопки просто отлично, я могу даже обновить его, и это тоже хорошо, но когда я загружаю каталог сборки на страницы github, я не могу получить доступ к кнопкам / и вместо этого я получаю страницу GitHub 404, а не моюсобственная страница 'notfound'.

Если я сделаю ссылку с домашней страницы на кнопки /, кнопки будут загружаться, но при прямом просмотре они не загружаются.

import React, { useState } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Context } from "./components/context";
import { Layout } from "./components/layout";
import { Home } from './routes/home';
import { Buttons } from './routes/buttons';
import { NotFound } from './routes/notfound';

const Router: React.FC = () => {

  const [global, setGlobal] = useState({
    language: localStorage.getItem("language") || 'en',
    apiUrl: 'https://api.domain.com/api',
    loggedIn: localStorage.getItem("jwt") ? true : false,
    redirectUrl: '',
    modal: false,
    modalState: '',
  });

  return (
    <Context.Provider value={{ global, setGlobal }}>
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <Route render = {({ location }) => (
          <Layout location = { location }>
            <Switch location = { location }>
              <Route exact path = '/' component = { Home } />
              <Route exact path = '/buttons/' component = { Buttons } />
              <Route component = { NotFound }/>
            </Switch>
          </Layout>
        )} />
      </BrowserRouter>
    </Context.Provider>
  );
}
export { Router };

В упаковке.json У меня есть домашняя страница, определенная как:

"homepage": "https://myName.github.io/myRepo",

Answer 1

Согласно документации по развертыванию в https://create -react-app.dev / , для страниц GH:

GitHub Pages не поддерживает маршрутизаторы, использующие HTML5 pushState история API под капотом (например, React Router с использованием browserHistory). Это связано с тем, что при загрузке новой страницы для URL-адреса, например <a href="http://user.github.io/todomvc/todos/42" rel="nofollow noreferrer">http://user.github.io/todomvc/todos/42</a>, где /todos/42 - это интерфейс внешнего интерфейса, сервер страниц GitHub возвращает 404, поскольку он ничего не знает о /todos/42.

* 1014. * Если вы хотите добавить маршрутизатор в проект, размещенный на страницах GitHub, вот несколько решений:

• Вы можете перейти от использования API истории HTML5 к маршрутизации с хэшами. Если вы используете React Router, вы можете переключиться на hashHistory для этого эффекта, но URL-адрес будет длиннее и более подробным (например, http://user.github.io/todomvc/#/todos/42?_k=yknaj) Подробнее о различных реализациях истории response-router.

Измените маршрут с:

    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <Route render = {({ location }) => (
         <Layout location = { location }>
             <Switch location = { location }>
                <Route exact path = '/' component = { Home } />
                <Route exact path = '/buttons/' component = { Buttons } />
                <Route component = { NotFound }/>
              </Switch>
           </Layout>
       )} />
    </BrowserRouter>

На:

import { HashRouter, Route, Link } from "react-router-dom";

...


    <HashRouter basename={process.env.PUBLIC_URL}>
      <Route render = {({ location }) => (
         <Layout location = { location }>
             <Switch location = { location }>
                <Route exact path = '/' component = { Home } />
                <Route exact path = '/buttons/' component = { Buttons } />
                <Route component = { NotFound }/>
              </Switch>
           </Layout>
       )} />
    </HashRouter>
...

• В качестве альтернативы, вы можете использовать трюк, чтобы научить GitHub Pages:обрабатывать 404 путем перенаправления на страницу index.html со специальным параметром перенаправления. Вам нужно будет добавить файл 404.html с кодом перенаправления в папку сборки перед развертыванием проекта, и вам нужно будет добавить код, обрабатывающий перенаправлениепараметр index.html. Подробное объяснение этого метода можно найти в этом руководстве .