const queryString = window.location.search;
const parameters = new URLSearchParams(queryString);
const value = parameters.get('key');
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
const queryString = window.location.href;
const parameters = new URLSearchParams(queryString);
const value = parameters.get('key');
const getParameters = (URL) => {
URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
return JSON.stringify(URL);
};
getParameters(window.location)
// Result: { search : "easy", page : 3 }
import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
function CheckoutDetails() {
const location = useLocation();
const [amountValue, setAmountValue] = useState(1);
// function to get query params using URLSearchParams
useEffect(() => {
const searchParams = new URLSearchParams(location.search);
if (searchParams.has("amount")) {
const amount = searchParams.get("amount");
setAmountValue(parseInt(amount, 10));
} else {
setAmountValue(1);
}
}, [location]);
return (
<p>Amount: {amountValue}</p>
)
const getParameters = (URL) => {
URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
return JSON.stringify(URL);
};
getParameters(window.location)
// Result: { search : "easy", page : 3 }
constructor(private router: Router) { }
public myMethodChangingQueryParams() {
const queryParams: Params = { myParam: 'myNewValue' };
this.router.navigate(
[],
{
relativeTo: activatedRoute,
queryParams: queryParams,
queryParamsHandling: 'merge', // remove to replace all query params by provided
});
}
content_copy
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
link to user component
</a>