Push query parameter to the URL with `useLocation`
March 30, 2021
A simple way to push query parameter to the URL, check the example below:
Imports
import { useLocation, useHistory } from "react-router-dom";
import queryString from "query-string";Child
const Child = () => {
const { search, pathname } = useLocation();
const { push } = useHistory();
// assume you want to add `lang` to query param
useEffect(() => {
const query = queryString.parse(search);
query.lang = "en";
push({ pathname, search: queryString.stringify(query) });
}, [search]);
return <div>Child</div>;
};Parent
const Parent = () => {
const { search, pathname } = useLocation();
useEffect(() => {
const query = queryString.parse(search);
console.log(query.lang);
}, [search]);
return (
<div>
<Child />
</div>
);
};