仅在部署到Azure Web App后才反应JS App路由问题 [英] React JS App Routing Issue Only After Deploying to Azure Web App
问题描述
我有一个带有React Router的React JS应用.在开发过程中,npm启动,我没有任何问题.我照常访问以下位置.
I have a React JS app, with React Router.During development, npm start, I get no issues. I visit the following location as usual.
http://localhost:3000
并且由于路由代码,它变为
and due to the routing code, it becomes
http://localhost:3000/index
,应用加载就好了.此时,
and the app loads just fine. At this point,
- 我重新加载,应用继续正常运行.
- 我手动链接或加载"http://localhost:3000/index",应用运行正常.
然后,稍后,我进行npm构建,进入该构建文件夹,然后再次进行npm启动.该应用程序运行正常.我重新加载,运行正常.到目前为止没有什么可抱怨的.
Then, later, I do an npm build, go inside this build folder, and do an npm start, again, the same thing. the app runs just fine. I reload, it runs fine. Nothing to complain so far.
问题部分.
然后,我决定将应用程序部署到Azure Web应用程序.该应用程序运行良好.我去了这个网站.
I then decided to deploy the app to an azure web app. The app runs fine. I go to this site.
https://randomstuffreactjsappsept24.azurewebsites.net
并且由于路由代码,它变为
and due, to routing code, it becomes
https://randomstuffreactjsappsept24.azurewebsites.net/index
然后,该网站就会加载.
And, the website loads.
这时,如果我遇到重载(问题!),它将尝试重载,
At this point, if I hit reload (problem!!), it will try to reload,
https://randomstuffreactjsappsept24.azurewebsites.net/index
我收到以下错误消息.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
现在,在这一点上,如果我删除'/index'并加载原始网址,
Now, at this point, if I remove the '/index' and load the original url,
https://randomstuffreactjsappsept24.azurewebsites.net
该站点加载正常,没问题.请注意,您可以自己查看.这是一个直播网站.(但是,当然,由于路由代码,它变成了)
The site loads just fine, no problem. Note, you can see it for yourself. this is a live site. (but of course, due to routing code, it becomes)
https://randomstuffreactjsappsept24.azurewebsites.net/index
现在,只要我不重新加载网站,该网站就会继续运行.为什么会这样?
Now, as long as I dont reload the website, the website continues to run. Why is this happening?
这是项目中index.js主页的代码.
Here is the code for the main index.js page from the project.
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/index" render={(props) => <Index {...props} />} />
<Redirect to="/index" />
</Switch>
</BrowserRouter>,
document.getElementById("root")
);
完整的应用程序可在此处使用- https://github.com/Jay-study-nildana/RandomStuffReactJSApp
The full app is available here - https://github.com/Jay-study-nildana/RandomStuffReactJSApp
更新2
我决定尝试另一个完全由另一个来源创建的react应用.再次,同样的问题,我有一个现场网站可供展示.
I decided to try another react app, created by another source entirely. Once again, same issue, and I have a live site to show.
- 我访问了 https://auth0tokenreactjsappprivatesept25.azurewebsites.net/external-api ,从网络应用程序中,它可以正常工作.如果我此时要重新加载,它会说您正在寻找的资源已被删除,名称已更改或暂时不可用."
- 我从应用程序内部访问http://localhost:3000/external-api,效果很好.而且,如果我要重新加载,则加载就很好.
- I visit, https://auth0tokenreactjsappprivatesept25.azurewebsites.net/external-api, from within the web app, it works fine. If i were to reload at this point, it will say "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
- I visit, http://localhost:3000/external-api, from within the app, it works fine. AND, If I were to reload, it loads just fine.
因此,它绝对是仅"的.部署后发生.
So, its definitely "only" happening after deployment.
推荐答案
According to: https://github.com/react-boilerplate/react-boilerplate/issues/1612 You would have to place the: Simply place the following file called web.config under your wwwroot folder:
<?xml version="1.0"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="React Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration>
将web.config文件添加到azure目录
Add the web.config file to the azure directory
这篇关于仅在部署到Azure Web App后才反应JS App路由问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!