I want to make the param from current url are pass to the next url when router change. for example:
My current url: localhost:3000/dashboard/?name=abc
when I move to page /profile for example then I expect the url must be like this:
Next Url: localhost:3000/profile/?name=abc
I want to pass automatically everytime we move the page even though we didn't include the param when we are pushing the router
If I do this: router.push("/profile"))
The result will be: localhost:3000/profile/?name=abc if I have query param name on the previous router
If anyone can refer me the documentation about it because I can't found it, or if you are have any solution for it. Thank You!
Add a comment
|
2 Answers
You may need to "forward" the current query along to the next route path using the URLObject syntax.
Example:
const router = useRouter();
...
router.push({
pathname: "/profile", // <-- new target path
query: router.query // <-- any current "queryString"
});
2 Comments
Potamir
ohh okay, so the only way to do it is by modify every router change by passing the current query? hmm.. I thought there is a way to intercept every query change on the _app file. Anyway many thanks!
Drew Reese
@Potamir Yeah, nothing I am aware of to do this automagically. If you find yourself needing to do this a lot you could abstract the logic into a custom React hook, but you'd still need to use the hook and new "push" function in all the places where you want to retain and forward the query.
Similar to Drew Reese's comment, I'm unaware of a better way than the following. I created a custom link component. I simply use this instead of <a> whenever I have a link where I want query params passed along. (Or you could use it implementing Next <Link>; I have reasons for using <a>.)
This is using modern Next. (Docs: "Use the <Link> component for navigation unless you have a specific requirement for using useRouter.")
You could also change it to pass along all query params without needing to know their names.
It took 15 minutes to replace all relevant links with this component, but after that's done you've got a quick modular solution for future use.
"use client";
import { useSearchParams } from "next/navigation";
import { ReactNode, useEffect, useState } from "react";
// This is for Typescript; delete if not using
interface CustomLinkProps
extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
href: string;
children: ReactNode;
}
const CustomLink: React.FC<CustomLinkProps> = ({
href,
children,
...props
}) => {
const searchParams = useSearchParams();
const [finalHref, setFinalHref] = useState(href);
useEffect(() => {
const utmSource = searchParams.get("utm_source");
const utmCampaign = searchParams.get("utm_campaign");
if (utmSource && utmCampaign) {
setFinalHref(
`${href}?utm_source=${utmSource}&utm_campaign=${utmCampaign}`
);
}
}, [searchParams, href]);
return (
<a href={finalHref} {...props}>
{children}
</a>
);
};
export default CustomLink;
Use example:
<CustomLink
href="https://www.example.com"
target="_blank"
rel="noopener noreferrer"
style={{ flex: "1" }}
>To Someplace</CustomLink>
