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 Router 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
    }
]