如何在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");