Реактивная маршрутизация работает на локальной машине, но не на страницах GitHub - PullRequest
Новая
       19

Реактивная маршрутизация работает на локальной машине, но не на страницах GitHub

0 голосов
/ 12 апреля 2020

Я развернул свое приложение React на страницах Github, но маршруты не работают на страницах Github.

Работает только базовый URL . Если я перейду на любую другую страницу, то получу ошибку 404.

Приложение. js

<Router>

        <nav role="navigation" id="nav_bar_hamburger">
          <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>

            <ul id="menu">
              <a href="/covid19-tracker"><li>Worldwide</li></a>
              <a href="/india-statewise"><li>India-Statewise</li></a>
              <a href="/coming-soon"><li>Coming Soon</li></a>
            </ul>
          </div>
        </nav>



        <div className="routingContainer">

          <Switch>
            <Route path="/covid19-tracker" component={WorldwideContainer} />
            <Route path="/india-statewise" component={IndianStateWise} />
            <Route path="/coming-soon" component={temp} />
          </Switch>
          <hr />
        </div>
 </Router>

Работает ли BrowserRouter по-другому после развертывания на страницах Github? Какое идеальное решение для этого?

1 Ответ

0 голосов
/ 12 апреля 2020

Ваша страница GitHub пытается обслуживать папку или файл /covid19-tracker со стороны сервера, а не искать маршруты из приложения React. Вероятно, использование <HashRouter /> является одним из решений. Таким образом, в конце у вас будет URL типа https://<github-url>/#/covid19-tracker.

. После хештега базового URL ваш React Router обрабатывает маршруты соответствующим образом.

Вы можете добавить как показано ниже в вашем приложении вместо <BrowserRouter />: 

<HashRouter>
   <App />
</HashRouter>

На основе документации - читайте далее здесь: <HashRouter />:

A <Router>, который использует часть URL * ha sh (т. Е. window.location.hash), чтобы синхронизировать ваш пользовательский интерфейс c с URL.

Как и из документации:

Поскольку этот метод предназначен только для поддержки устаревших браузеров, мы рекомендуем вам настроить сервер для работы с <BrowserHistory>.

Но в этом случае вы, вероятно, этого не сделаете у меня есть доступ к этой модификации.

Надеюсь, это поможет!

...