Heroku路线上带有React应用程序的Rails在刷新时不起作用 [英] Rails with React app on Heroku routes don't work on refresh

问题描述

我一直在尝试使用集成的React前端构建Rails API，并将其部署到Heroku.我正在使用create-react-app在Rails项目文件夹内名为"client"的目录中构建React应用.我在localhost:3001上运行Rails api，在localhost:3000上运行React应用程序.当我将其部署到Heroku时，它可以工作，除非使用React Router URL并尝试刷新页面，或者尝试将URL复制并粘贴到浏览器中.在多个浏览器上都是相同的结果.例如，如果我转到根URL: https://appname.herokuapp.com ，它将显示带有导航栏的React应用.如果我点击文章"，它将带我到 https://appname.herokuapp.com/articles 并显示反应文章"页面. 但是，如果刷新浏览器，只会得到一个空白页面.如果我在浏览器中复制/粘贴此网址，也是如此.

I have been trying to build a Rails API with an integrated React front end and deploy it to Heroku. I am using create-react-app to build the React app in a directory called "client" within the Rails project folder. I run the Rails api on localhost:3001 and the React app on localhost:3000. And it works when I deploy it to Heroku except when I am using a React Router url and try to refresh the page, or if I try to copy and paste the URL in the browser. It's the same result on multiple browsers. For example if I go to the root url: https://appname.herokuapp.com it will display the React app with a navbar. If I click on "articles" it will take me to https://appname.herokuapp.com/articles and display the react articles page. However if I refresh the browser I just get an empty page. Same if I copy/paste this url in a browser.

我遵循了大约三个独立的教程，这些教程都是从2018年左右开始的，它们都向Heroku部署了Rails/React应用.他们都提到了这个问题，并提供了完全相同的解决方案.

I have followed three separate tutorials on deploying a Rails/React app to Heroku all from around 2018. They all mention this issue and offer the exact same solution.

在app/controllers/application_controller.rb中添加以下操作:

In app/controllers/application_controller.rb add this action:

def fallback_index_html
  render :file => 'public/index.html'
end

然后在路线的底部添加此路线:

And in the routes add this route at the bottom:

# config/routes.rb
get '*path', to: "application#fallback_index_html", constraints: ->(request) do
  !request.xhr? && request.format.html?
end

他们都说这行得通.但是在尝试了三个在相同问题上均失败的单独教程之后，我很茫然.我知道在刷新页面上，应用程序正在查找Rails路由而不是React Router路由.上面的解决方案不起作用.也许Heroku，Rails或React发生了一些更改，导致它现在无法正常工作.我该如何解决?

They all say this will work. But after trying three separate tutorials that all fail on the same issue I am at a loss. I know that on the page refresh the app is looking for the Rails routes not the React Router routes. The above solution is not working. Maybe something changed with Heroku, Rails or React that is preventing this from working now. How do I fix this?

推荐答案

我不知道您是否还在寻找答案，但您确实描述了我的情况.我最终发现了此帖子适用于我.

I don't know if you are still searching for an answer to this, but you described my situation exactly. I eventually found this post that worked for me.

看起来ActionController::API无法渲染文件，但是ActionController::Base可以渲染文件.因此，更改应用程序控制器的继承可能会解决它.上面链接的解决方案也为避免肿胀提供了建议.

It looks like ActionController::API cannot render files, but ActionController::Base can. So changing your application controller's inheritance might solve it. The solution linked above gives a suggestion for avoiding bloat too.

这篇关于Heroku路线上带有React应用程序的Rails在刷新时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！