React App 未在 AWS Amplify 上正确重定向

Question

这是我第一次在 AWS Amplify 上部署 React 应用程序。该应用程序作为 SPA 运行良好，唯一的问题是重定向。

例如; 当用户完全注册并获得验证电子邮件的链接时，单击该链接会将我重定向到 mydomain.com/index.html。

此外，当我尝试导航到 mydomain.com/sign-in（这应该引导我登录页面）时，它会将我重定向到 mydomain.com/index.html。

我该如何解决这个问题？

Answer 1

尝试转到应用设置-> 重写和重定向

添加新规则

• 来源应该是 </^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
• 目标地址 index.html
• 类型 200 (Rewrite)

这是最终结果应该是什么样子的示例。

如果这不起作用，请尝试这个

</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>

Answer 2

您需要接受并传送所有文件。当 React 构建时，它会运行该index文件，但 React-router 会根据 SPA 要求来操纵路径。将其粘贴到您的重写和重定向中。如果您正在运行标准的 React 路由器 Web 应用程序，这通常会起作用。

[
    {
        "source": "</^((?!\\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    },
    {
        "source": "/<*>",
        "target": "/",
        "status": "404",
        "condition": null
    }
]