当前位置: 首页 > 知识库问答 >
问题:

Create-react-app,承载在S3上的react-router v3不能使用“fetch as google”

慕翰学
2023-03-14

我目前有一个用create-react-app构建的React应用程序,使用通过CloudFront托管在S3上的react-router v3。该应用程序是托管在其他地方的PHP api的视图。react-router设置为使用BrowserHistory。

到目前为止,我已经尝试了:1)在GoogleBot的入口点导入babel-polyfill。2)设置CloudFront错误页面,以向/index.html发送404个响应,并使用200)将s3的错误页面设置为index.html

根据我的阅读,谷歌应该不需要服务器端渲染来抓取网站(SEO对我们来说不是一个问题),但我在网上找到的其他解决方案似乎都没有解决这个问题。

我需要让整个应用程序能够处理SSR吗?比如:https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/readme.md#servering-apps-with-client-side-routing,或者我可以尝试其他方法来使页面可以爬行,而无需设置服务器端的任何东西?

任何帮助或指示进一步的资源将不胜感激!

共有1个答案

龙华翰
2023-03-14

我发现解决办法很简单。在cloudfront发行版中,将自定义错误页面设置为将404个错误转到目标“/”,http响应为200。

许多其他人将它与目标一起发布为“/index.html”,如果这不起作用,只需尝试上面的方法。

 类似资料:
  • Create React App 不用配置就可以创建 React App。 全局安装: npm install -g create-react-app 创建 App: create-react-app my-appcd my-app/ 启动 npm: npm start 打开 http://localhost:3000/  查看你的 App。 如果你准备将其部署到生产环境,只需创建一个压缩包,并且运行 npm run build。

  • 创建响应应用时,图像中出现错误。它一直在正常工作,我所做的就是mkdir和cd到那个dir。 这就是错误的样子... NPX:在36.634s中安装了99必须使用导入来加载ES模块: C:\用户\Neeraj\AppData\漫游\npm-cache_npx\5172\node_modules\create-react-app\node_modules\is-promise\index.js不支持

  • 问题内容: 我正在尝试在Google App Engine上部署使用create-react-app创建的应用程序。 我的应用程序在本地(和)都可以正常运行。但是,在Google App Engine上部署的应用程序仅显示index.html,并且不会调用我的react代码。 Chrome开发者控制台显示。 另外,我在console.cloud.google.com上发现,已部署的应用程序不包含构

  • Create React Native App The fastest way to create universal React Native apps npx create-react-native-app Once you're up and running with Create React Native App, visit this tutorial for more informat

  • 我正在尝试在反应加载之前添加一个闪屏。 因为我使用的是react脚本/react-app,所以我的index.tsx只有以下部分: 我试着在同一个页面上添加我自己的div,但它没有显示出来。 我想显示一个简单的空白屏幕与我的飞溅图像在1秒定时器之前的反应加载,以避免/隐藏渲染元素的移动。 **如果我确实在app.tsx中添加了屏幕,则在屏幕加载之前会发生移动 更新 正如Rishabh在下面指出的,

  • Create React Redux App Structure Create React + Redux app structure with build configurations. What can I find here? Express, Cors React + Redux, ES6, async/await Web Components (Custom Elements) inte