我有一个带有React路由器的React JS应用程序。在开发过程中,NPM启动,我没有遇到任何问题。我像往常一样访问以下位置。
http://localhost:3000
由于路由代码,它变成了
http://localhost:3000/index
应用程序加载正常。此时,
- 我点击重新加载,应用程序继续正常运行。
- 我手动链接或加载"http://localhost:3000/index",应用程序运行正常。
然后,后来,我做了一个NPM构建,进入这个构建文件夹,然后做了一个NPM启动,再一次,同样的事情。应用程序运行得很好。我重新加载,它运行得很好。到目前为止没有什么可抱怨的。
- 问题部分 *
然后我决定把这个应用程序部署到一个Azure Web应用程序上。这个应用程序运行得很好。我去了这个网站。
https://randomstuffreactjsappsept24.azurewebsites.net
由于路由代码,它变成了
https://randomstuffreactjsappsept24.azurewebsites.net/index
而且,网站加载。
此时,如果我点击reload(问题!!),它将尝试重新加载,
https://randomstuffreactjsappsept24.azurewebsites.net/index
我得到以下错误。
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
现在,如果我删除'/index '并加载原始URL,
https://randomstuffreactjsappsept24.azurewebsites.net
该网站加载刚刚好,没有问题。注意,你可以看到它为自己。这是一个活的网站。(但当然,由于路由代码,它成为)
https://randomstuffreactjsappsept24.azurewebsites.net/index
现在,只要我不重新加载网站,网站就会继续运行。为什么会发生这种情况?
下面是项目中index.js主页的代码。
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
- 更新2**
我决定尝试另一个react应用程序,完全由另一个来源创建。再一次,同样的问题,我有一个现场展示。
- 我从Web应用程序内部访问https://auth0tokenreactjsappprivatesept25.azurewebsites.net/external-api,它工作正常。如果我在此时重新加载,它会说"您正在查找的资源已被删除,名称已更改,或者暂时不可用。"
- 我从应用程序内部访问http://localhost:3000/external-api,它工作正常。而且,如果我重新加载,它加载得很好。
所以,它肯定"只"发生在部署后。
3条答案
按热度按时间rryofs0p1#
根据:https://github.com/react-boilerplate/react-boilerplate/issues/1612您必须放置:只需将以下名为web.config的文件放在wwwroot文件夹下即可:
将web.config文件添加到azure目录
bq8i3lrv2#
我昨天在Azure Web应用程序部署中使用了自定义构建后遇到了这个问题(使用X1 M0 N1 X跳过它,并在以前的工作中构建它)。
我的错误是我的
staticwebapp.config.json
文件不在公共文件夹中-〉它没有正确部署。插入任何路由后,azure抛出了一个404。只需将
staticwebapp.config.json
移动到公共文件夹中,就可以开始了。omjgkv6w3#
我们的Azure应用服务运行的是PHP和Apache,因此我们使用了一个
.htaccess
文件,如Create React App的部署文档中所建议的https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing将
.htaccess
添加到公共文件夹中,这将停止这些类型的Aapp服务的刷新问题。