仅在部署到Azure Web App后才ReactJS应用路由问题

0g0grzrc  于 2023-01-30  发布在  React
关注(0)|答案(3)|浏览(163)

我有一个带有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,它工作正常。而且,如果我重新加载,它加载得很好。

所以,它肯定"只"发生在部署后。

rryofs0p

rryofs0p1#

根据:https://github.com/react-boilerplate/react-boilerplate/issues/1612您必须放置:只需将以下名为web.config的文件放在wwwroot文件夹下即可:

<?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目录

bq8i3lrv

bq8i3lrv2#

我昨天在Azure Web应用程序部署中使用了自定义构建后遇到了这个问题(使用X1 M0 N1 X跳过它,并在以前的工作中构建它)。
我的错误是我的staticwebapp.config.json文件不在公共文件夹中-〉它没有正确部署。插入任何路由后,azure抛出了一个404。
只需将staticwebapp.config.json移动到公共文件夹中,就可以开始了。

omjgkv6w

omjgkv6w3#

我们的Azure应用服务运行的是PHP和Apache,因此我们使用了一个.htaccess文件,如Create React App的部署文档中所建议的https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

.htaccess添加到公共文件夹中,这将停止这些类型的Aapp服务的刷新问题。

相关问题