将服务器请求重定向到/index.html以进行React / Angular SPA

时间:2019-03-21 21:16:13

标签: angular reactjs react-router angular-routing deep-linking

假设我有一个React或Angular应用程序托管在www.mywebsite.com/index.html上,Apache提供了该Web应用程序文件。在应用程序内,我有很多路线  定义,例如/ aboutus或/ faq。但是众所周知,实际上不存在/aboutus.html或/faq.html文件。这些路由内置在网络应用程序的路由器中。

因此,我想知道如果有人尝试直接访问www.mywebsite.com/aboutus而没有先在www.mywebsite.com/index.html上加载Web应用程序会发生什么情况。我已经在线阅读了有关这种情况的处理方法,因为只有一个实际文件会将所有http请求重定向到/index.html。如果您使用的是Apache,则必须对其进行配置以重定向所有内容。

我想知道的是React / Angular路由器如何知道重定向后要加载的路由。例如,如果您访问www.mywebsite.com/aboutus,它将重定向到www.mywebsite.com/index.html,然后根据我在网上阅读的内容,React / Angular应用程序将能够加载/ aboutus重定向后在应用内的路由。

我会想到/ aboutus在重定向中丢失了。如果您的服务器重定向到www.website.com/index.html,则您现在使用其他URL,并且丢失了/ aboutus。该网络应用已加载,但没有原始目标URL,因此无法知道该去哪里。这怎么工作?

2 个答案:

答案 0 :(得分:1)

服务器不应将具有30倍代码响应的/ aboutus重定向到/index.html。相反,它应该响应200 index.html。在这种情况下,浏览器将加载www ..... / aboutus链接(它将获得与.com / index.html路径相同的index.html,但仅包含另一个URL),而FE famework脚本将处理其余的

答案 1 :(得分:0)

  

,根据我在网上阅读的内容,React / Angular应用程序将   然后可以在应用程序后加载/ aboutus路由   重定向。

^^这是真的-您所读的完全不是谎言。路由器代码引导时,它将检查当前网址,并查看是否存在匹配项,如果找到匹配项,则将渲染该路由-否则将使用后备路由(可能是本地路由或​​类似路由)。