How to pass props in url in react js?

Question

I want to know how to send the correct format of props in url in React js.

Suppose my prop name is "isOpen" and its type is Boolean.

My URL is http://localhost:3000/Home.

Now I also want to send my props through this URL. How to do it?

I have tried something like http://localhost:3000/Home/isOpen/false but it throws this error in the console.

Rejecting execution of script from 'http://localhost:3000/Home/bundle.dev.js' because its MIME type ('text/html') is not executable and strict MIME type checking is enabled.

How do i do this?

Answer 1

You can use a query string in the URL, in your case it should look like this:

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

And use the URLSearchParams and useLocation hooks to read from the URL isOpen:

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