Reactjs 防止AWS Amplify添加尾部斜杠并强制重定向

我正在使用AWS Amplify，无法确定如何配置我的重写和重定向或routes.js以防止尾部斜杠破坏我的功能

当我在本地运行代码并尝试访问

localhost:3000/foo/bar/id

时，页面呈现良好。当我通过amplify部署相同的代码时，用户单击一个带有href的按钮，浏览器会得到一个

302

，并将用户重定向到

example.com/foo/bar/id/

，然后由于此页面不存在，默认的amplify重定向会使用

404

将它们发送到

index.html

我已尝试将以下内容添加到我的反应路线中：

/foo/bar/:id
/foo/bar/:id/

以及AWS放大控制台中的以下重定向规则：

/foo/bar/<id>  | /foo/bar/<id> | 302
/foo/bar/<id>/ | /foo/bar/<id> | 302

/foo/bar/|/foo/bar/| 302
/foo/bar//|/foo/bar/| 302

---

但一切都不起作用。我在这里发疯了，有什么建议吗

Amplify添加了一个尾随斜杠，以防止像

/about.html

这样的URL，但这可能不是真正的原因。您的应用程序/浏览器正在使用服务器端不存在的路由向服务器发出请求（您正在使用严格属于客户端的SPA路由）。尝试在amplify js控制台中添加以下重定向规则（在应用程序设置下：重定向和重写>编辑>打开文本编辑器）：

---

原因是webform将替换反斜杠

我在Amplify上的Next.js网站也有同样的问题。经过几个小时的测试，我发现了以下解决方案：

[{
    "source": "/report/<slug>/",
    "target": "/report/<slug>",
    "status": "200",
    "condition": null
},
{
    "source": "/report/<slug>",
    "target": "/report/<slug>.html",
    "status": "200",
    "condition": null
}]

[{
“来源”：“/报告/”，
“目标”：“/报告/”，
“状态”：“200”，
“条件”：空
},
{
“来源”：“/报告/”，
“目标”：“/report/.html”，
“状态”：“200”，
“条件”：空
}]

把它添加到你的重定向中，那么它就可以工作了

---

您只需将“报告”替换为url部分。

这真的很有帮助。我会在你的回答中添加一张图片，以便澄清。我遵循了解决方案，它解决了我的问题。

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

[{
    "source": "/report/<slug>/",
    "target": "/report/<slug>",
    "status": "200",
    "condition": null
},
{
    "source": "/report/<slug>",
    "target": "/report/<slug>.html",
    "status": "200",
    "condition": null
}]