为 React/Angular SPA 将服务器请求重定向到 /index.html答案

【问题标题】：Redirecting Server Requests to /index.html for React/Angular SPA为 React/Angular SPA 将服务器请求重定向到 /index.html
【发布时间】：2019-03-21 21:16:13
【问题描述】：

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

所以我想知道如果有人尝试直接访问 www.mywebsite.com/aboutus 而不先在 www.mywebsite.com/index.html 加载网络应用程序会发生什么。我在网上读到，由于您只有一个实际文件，因此您必须为这种情况做些什么，将所有 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。 Web 应用程序被加载，但没有原始目标 URL，它不知道去哪里。这怎么行？

【问题讨论】：

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

【解决方案1】：

服务器不应使用 30X 代码响应将 /aboutus 重定向到 /index.html。相反，它应该响应 200 index.html。在这种情况下，浏览器将加载 www...../aboutus 链接（它将获得与 .com/index.html 路径相同的 index.html，但只是使用另一个 url）并且 FE Famework 脚本将处理其余部分

【讨论】：

【解决方案2】：

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

^^ 这是真的——你读到的根本不是谎言。当路由器代码启动时，它会检查当前 url 并查看是否有任何匹配项，如果找到匹配项，则呈现该路由 - 否则它将使用备用路由（可能是 home 或类似的）。

【讨论】：