React App 无法在 AWS Amplify 上正确重定向

Question

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

例如; 当用户完全注册并获得验证 email 的链接时，单击该链接会将我重定向到 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 要求操作路径。 将此粘贴到您的重写和重定向中。 如果您正在运行标准的反应路由器 webapp，这通常会起作用。

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