Question

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

2019-09-27

6578

reactjs amazon-web-services aws-amplify

这是我第一次在 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 (重写)

以下是最终结果的示例。

如果这不起作用，请尝试此方法一

</^((?!.(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
    }
]

Answer 3

如果上述步骤不完全奏效，请尝试将 <base href="/" /> 添加到 index.html 的 <head/> 部分，如此处所述。

这是我在文本编辑器中打开的最终重写和重定向：

[
    {
        "source": "https://example.com",
        "target": "https://www.example.com",
        "status": "302",
        "condition": null
    },
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp|html|xml|webmanifest|mp4)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    },
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]