Fatal编程技术网
  • reactjs/
  • Reactjs 搜索控制台中的谷歌爬虫可以'；在React using Github页面中找不到路由

Reactjs 搜索控制台中的谷歌爬虫可以'；在React using Github页面中找不到路由

reactjs

Reactjs 搜索控制台中的谷歌爬虫可以'；在React using Github页面中找不到路由,reactjs,react-redux,react-router,github-pages,google-crawlers,Reactjs,React Redux,React Router,Github Pages,Google Crawlers,我的问题是谷歌搜索控制台中的爬网无法在React中找到子路由 URL是，爬虫可以获取并呈现主页（route/）和静态文件，如/robots.txt，/favicon.ico，但是它找不到子路由，这些子路由由React（SPA，使用Redux）呈现，例如/algorithm/sha256。例如，爬虫找不到，但可以访问 这是我在谷歌搜索控制台中尝试过的截图 谁能解释为什么以及如何解决我的问题？我正在github上使用react-router-dom和react-redux我的存储库 编辑1 我也试

我的问题是谷歌搜索控制台中的爬网无法在React中找到子路由

URL是，爬虫可以
获取并呈现
主页（route
/
）和静态文件，如
/robots.txt
，
/favicon.ico
，但是它找不到子路由，这些子路由由React（SPA，使用
Redux
）呈现，例如
/algorithm/sha256
。例如，爬虫找不到，但可以访问

这是我在谷歌搜索控制台中尝试过的截图



谁能解释为什么以及如何解决我的问题？我正在github上使用
react-router-dom
和
react-redux
我的存储库

编辑1

我也试过这个问题的答案，但不起作用。我在
index.html
（）中添加了脚本，但仍然找不到搜索控制台，所以它也不能在屏幕上显示任何错误

编辑2

我也试过这个问题的答案，但不起作用。我已经创建了404.html文件，并按照答案的指示添加了脚本，但它也不起作用

编辑3


我还尝试了这个问题的答案，创建了一个简单的
sitemap.xml
，googlebot可以找到这个文件并发现我在sitemap中定义的所有URL。但是它也不能获取和呈现上面提到的URL。
我翻遍了你的源代码，没有看到任何令人担忧的东西；然而，我发现了一些关于类似问题的帖子。第二个似乎特别有用，所以我在这里重复一下。在Reddit上向@Zerotorescue大声呼喊

打开谷歌搜索控制台，进入爬网->以谷歌身份获取，然后进行获取和渲染

将其作为HTML文件中标记的一部分或捆绑包的一部分添加到站点：



我推荐前者，因为如果你想让它更具可读性（无需重新编译你的应用程序），那就更容易修改

将其推送到您的站点，然后执行另一次获取和显示。阻止Google运行您的应用程序的错误现在将显示。搜索控制台的分辨率很低，因此您可能必须增加错误的字体大小，然后再次提取。别担心，谷歌并不介意重复的电话

你可能会发现谷歌的爬虫程序无法处理你的代码，因为你正在使用它不支持的ES6功能。你可以通过填充来修复这个问题。我试过一些东西，比如说，结果证明并不真正支持Googlebot，虽然它有时可能会工作，但它是相当不可靠的。相反，我建议使用babel polyfill。对于每个人来说，它都会稍微增加您的捆绑包大小，但根据我的经验，它提供了最广泛的浏览器支持，而且不会让人头痛。只要打开它，你就完成了

如果您使用的是create react应用程序，这是我使用的polyfills.js文件，您可以复制：




请注意，有许多注释解释了polyfill服务引入的所有问题，如果您使用babel polyfill，您将不必处理这些问题。
我也没有看到您的代码中有任何令人担忧的地方（尽管我认为您的
中不需要
baseUrl
——尽管我可能错了，也不认为这是问题所在，但如果不需要，它可能值得删除）

只是一个猜测，但当我浏览链接时，看着网络标签，我注意到了服务人员。无可否认，对于服务人员，我并不是超级精明（现在！）然而，谷歌搜索显示，谷歌爬虫程序还不支持服务人员，而且……我还注意到，如果我在通过应用程序内导航访问的一个链接上运行灯塔测试（例如，我单击主页导航中的
/算法
选项卡，然后运行灯塔测试）我得到以下错误：

有一些问题影响了灯塔的运行：Chrome扩展
此页面的加载性能受到负面影响。请尝试审核
页面处于匿名模式或来自不带扩展名的Chrome配置文件

更有趣的是：

Lighthouse无法可靠地加载您请求的页面。请
确保您正在测试正确的URL，并且服务器运行正常
正在响应所有请求。状态代码：404


…尽管在浏览器中清晰地看到了它的呈现。似乎有点可疑。因此，如果这是导航的一部分（似乎它基于repo lol中的
registerServiceWorker.js
文件），这可能是您的链接未被找到/跟踪的原因。
我发现，当我打开时，我实际上收到了一个404作为一个。我认为您使用
404.html
在GitHub上托管SPA的解决方法是这里的问题。虽然我们人类看到您的应用程序在我们的浏览器上得到了正确的服务，但googlebot并不在意，只要看看响应就可以了nse代码，并查看它已收到
404
。您需要一个不同的解决方案，它不涉及将
404.html
直接用作应用程序的入口点

尝试以下操作，它使用
404.html
将浏览器重定向到
index.html
，同时保留原始路径，它声称googlebot将其注册为
301
，而不是
404
，对于您的情况，这意味着将这些更改添加到您的站点中，请注意
：



密码学
//用于GitHub页面的单页应用程序
// https://github.com/rafrex/spa-github-pages
//版权（c）2016 Rafael Pedicini，根据麻省理工学院许可证获得许可
// ----------------------------------------------------------------------
//此脚本获取当前url并转换路径和查询
//字符串转换为一个查询字符串，然后重定向浏览

<a title="This my Route One" href="https://myreactapp/routeOne" alt="Route One"/>



<html>
<head>
  <script>
    sessionStorage.redirect = location.href; // we'll use this later
  </script>
  <meta http-equiv="refresh" content="0;URL='/crypto'">
</head>
<body></body>
</html>



<script>
  (function(){
    var redirect = sessionStorage.redirect; // remember me?
    delete sessionStorage.redirect;
    if (redirect && redirect != location.href) {
      history.replaceState(null, null, redirect);
    }
  })();
</script>