Маршрутизация на страницах github не работает. Как мне это исправить? - PullRequest
Новая
       5

Маршрутизация на страницах github не работает. Как мне это исправить?

0 голосов
/ 20 июня 2020

Скажите, пожалуйста, почему, когда я обновляю sh страницу или хочу вручную ввести адрес ссылки на моем сайте, я получаю ошибку «404 не найден». Сайт находится на страницах github. Что я могу сделать, чтобы исправить ошибку?

Маршрутизация настроена. 

<BrowserRouter>
<Switch>
     <Route exact path="/event">
           <Link><Main /></Link>
     </Route>
     <Route path="/api/:id">
           <Description />
      </Route>
</Switch>
</BrowserRouter>

Все работает нормально на локальном хосте.

Пробовал HashRouter вместо BrowserRouter, но тогда вообще ничего не появляется.

1 Ответ

0 голосов
/ 20 июня 2020

страниц github не очень хорошо подходят для одностраничных приложений, но есть хакерство. добавьте этот скрипт в свой index. html в publi c папку 

  <script type="text/javascript">
    // Single Page Apps for GitHub Pages
    // https://github.com/rafrex/spa-github-pages
    // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
    // ----------------------------------------------------------------------
    // This script checks to see if a redirect is present in the query string
    // and converts it back into the correct url and adds it to the
    // browser's history using window.history.replaceState(...),
    // which won't cause the browser to attempt to load the new url.
    // When the single page app is loaded further down in this file,
    // the correct url will be waiting in the browser's history for
    // the single page app to route accordingly.
    (function (l) {
      if (l.search) {
        var q = {};
        l.search.slice(1).split('&').forEach(function (v) {
          var a = v.split('=');
          q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
        });
        if (q.p !== undefined) {
          window.history.replaceState(null, null,
            l.pathname.slice(0, -1) + (q.p || '') +
            (q.q ? ('?' + q.q) : '') +
            l.hash
          );
        }
      }
    }(window.location))
  </script>

и создайте собственный 404. html в publi c папке 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Single Page Apps for GitHub Pages</title>
    <script type="text/javascript">
        // Single Page Apps for GitHub Pages
        // https://github.com/rafrex/spa-github-pages
        // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
        // ----------------------------------------------------------------------
        // This script takes the current url and converts the path and query
        // string into just a query string, and then redirects the browser
        // to the new url with only a query string and hash fragment,
        // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
        // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
        // Note: this 404.html file must be at least 512 bytes for it to work
        // with Internet Explorer (it is currently > 512 bytes)

        // If you're creating a Project Pages site and NOT using a custom domain,
        // then set segmentCount to 1 (enterprise users may need to set it to > 1).
        // This way the code will only replace the route part of the path, and not
        // the real directory in which the app resides, for example:
        // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
        // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
        // Otherwise, leave segmentCount as 0.
        var segmentCount = 0;

        var l = window.location;
        l.replace(
            l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
            l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
            l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
            (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
            l.hash
        );
    </script>
</head>

<body>
</body>

</html>

what это значит, что мы, когда refre sh, страница github фактически достигает сервера для этого маршрута c, но поскольку это SPA, файл не будет доступен, поэтому он отправляет страницу 404. html, которая получает имя пути из файл и вызывает страницу index. html и вставляет туда путь.

...