github 页面上的路由不起作用。我如何解决它？

Question

github 页面上的路由不起作用。我如何解决它？

请告诉我为什么当我刷新页面或如果我想在我的网站上手动输入链接地址时，我会收到“404 未找到”错误。该站点位于 github 页面上。我可以采取什么措施来纠正该错误？

路由已设置。

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

Run Code Online (Sandbox Code Playgroud)

本地主机上一切正常。

尝试HashRouter代替BrowserRouter，但什么也没有出现。

Answer 1

小智 6

github 页面对于单页面应用程序来说效果不佳，但有一些破解方法。将此脚本添加到公共文件夹中的index.html

  <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>

Run Code Online (Sandbox Code Playgroud)

并在公共文件夹中创建自定义 404.html

<!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>

Run Code Online (Sandbox Code Playgroud)

这样做的作用是，当我们刷新页面时，github实际上到达了该特定路由的服务器，但由于它是SPA，文件将不可用，因此它发送404.html页面，该页面从文件中获取路径名并调用index.html。 html 页面并将路径名粘贴到那里。

归档时间：	5 年，6 月前
查看次数：	2380 次
最近记录：	5 年，6 月前