如何在react js中传递url中的props？

Question

我想知道如何在 React js 中发送 url 中的 props 的正确格式。

假设我的道具名称是“isOpen”，其类型为布尔值。

我的网址是 http://localhost:3000/Home。

现在我也想通过这个网址发送我的道具。如何做到？

我尝试过类似的方法 http://localhost:3000/Home/isOpen/false 但它在控制台中抛出此错误。

拒绝执行来自“http://localhost:3000/Home/bundle.dev.js”的脚本，因为其 MIME 类型（“text/html”）不可执行，并且启用了严格的 MIME 类型检查。

如何做到这一点？

Answer 1

您可以在 URL 中使用查询字符串，在您的情况下，它应该是这样的：

http://localhost:3000/Home/?isOpen=false

并使用 URLSearchParams 和 useLocation 挂钩从 URL 读取 isOpen：

const location = useLocation();
const isOpen = new URLSearchParams(location.search).get("isOpen");