当前位置: 首页 > 面试题库 >

React路由器直接链接在Azure Web App Linux上不起作用

程仲卿
2023-03-14
问题内容

我使用ReactJs开发了有关PWA(渐进式Web应用程序)的PoC,以展示如何使用Browser API中的相机,地理位置,麦克风,光传感器等。

我已经为该Web应用程序中的每个功能创建了一条路由,并且在localhost中一切正常。但是,当我在 Azure Wep App Linux服务
上部署我的react应用的npm
build版本时,它无法正常工作。我可以访问主页(index.html),从那里可以导航到任何其他页面,但是当我尝试直接通过其URL访问任何路由时,我会收到404错误。除索引页面外,所有URL在手动刷新或写入时均不起作用。

例如:
https ://pwa.mypoc.dev/-正常 工作
https://pwa.mypoc.dev/lights- 不起作用

我在天蓝色的“设置”>“常规设置”>“启动命令”上使用了此命令:

pm2 serve /home/site/wwwroot/build --no-daemon

我找到了一个与此相关的问题,但答案没有帮助我,因为我没有使用web.config它,因为它是 运行Node 10 LTS


问题答案:

经过更多研究后,我发现了问题所在。当Linux Azure Web Apps使用pm2服务节点应用程序时,我在查阅官方文档时找到了答案。

PM2是守护程序进程管理器,它将帮助您管理和保持应用程序在线。PM2入门非常简单,它是一个简单直观的CLI,可以通过NPM安装。

https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-
redirect-all-to-indexhtml

只需要将添加--spa选项到 启动命令Azure的Web应用程序的Linux 常规设置

pm2 serve /home/site/wwwroot/build --no-daemon --spa

使用--spa选项pm2将自动将所有查询重定向到index.html,然后react router将发挥作用。



 类似资料:
  • 我正在尝试在我的nginx服务器上设置vue路由器。我遇到的问题是,如果我直接在浏览器中输入url,我的路线就不起作用。 我尝试了vue路由器文档中描述的服务器配置,以及建议的堆栈溢出类似配置。我当前的nginx位置配置如下: 所做的就是将任何路径重定向到我的根组件(path:),而不是。这确实有意义,并且似乎只重定向到索引文件。我如何重定向直接链接的到路由在我的VueJS应用程序? 以下是我的v

  • 问题内容: 我有一个连接到的前端,并且在端用定义了路由。当我用来将它们定向到动态路线时,它们可以正常工作。但是当我直接使用浏览器地址栏访问按Enter的链接时,或者我刷新了。 404页面不存在 而且我知道那是因为发生了对服务器的直接调用,并且当我们在共享主机上进行操作时,没有必要操纵共享主机上的操作。 考虑过但不适合API的动态特性。请允许我提供解决此问题的任何方法吗? 问题答案: 检查一下:ht

  • 我正在使用React路由器与链接,以改变URL和导航通过应用程序。在阅读列表中,我使用以下代码导航用户阅读edit: 我定义了以下路由: 我怎样才能解决那个问题?

  • 非常类似于这个角度问题:当使用react路由器时,如何使用锚定链接进行页面内导航? 换句话说,我如何实现以下纯超文本标记语言时使用反应路由器? 目前我截取这种链接上的点击,并滚动到锚位置。这并不令人满意,因为这意味着不可能直接链接到页面的某个部分。

  • 我正在另一台计算机上安装Wamp服务器,以运行一个中型数据库和用户界面。我已经成功拦截了IIS,并将服务器路由到Localhost:8080。但是每当我试图从本地主机主页访问我的项目时,在www文件中;我被重定向到一个页面没有找到错误。 当我将鼠标悬停在链接上方时,目录总是出现“http:// ProjectFolderNameHere /”。当它应该是“http:// LocalHost:808

  • 我正在获取中的产品列表,在其中,我需要将选定的产品对象传递给。 目前,我正在尝试将作为路由参数传递,并再次获取产品对象。但是我想将整个产品对象从发送到。 我的路线是 产品列表组件链接 如何将产品对象作为道具传递给? 下面的代码在Typescript中抛出错误,表示