remove url query params without page rerender/refresh
Unanswered
Sardinian Shepherd Dog posted this in #help-forum
Sardinian Shepherd DogOP
Hello,
I'm using nextjs app router and am redirecting a user back to my
However, I don't want this state to be in the URL after the modal has been rendered, because if the user copies the link and sends it to a friend then they will also get the popup modal, even though they were not redirected.
page.tsx (ssr)
error modal:
When I use
Is there a fix for this? or maybe a better way of passing the one off state from the redirect to /dashboard?
I'm using nextjs app router and am redirecting a user back to my
/dashboard
page, with a query parameter of /dashboard?error=unableToFetchData
, this query parameter is used to display a popup modal telling them why they were redirected. However, I don't want this state to be in the URL after the modal has been rendered, because if the user copies the link and sends it to a friend then they will also get the popup modal, even though they were not redirected.
page.tsx (ssr)
export default async function Dashboard({ searchParams }: DashboardProps) {
const { error } = await searchParams;
const guilds = await api.guild.getAll();
return (
<>
<HydrateClient>
{error && <ErrorDialog error={error} />}
<PublicNavBar />
</HydrateClient>
</>
);
}
error modal:
export const ErrorDialog = ({ error }: Props) => {
const router = useRouter();
useEffect(() => {
router.push("/dashboard");
}, []);
return (
<Dialog open={true}>
<DialogContent className="">
<DialogHeader>
<DialogTitle>An error occured</DialogTitle>
<DialogDescription>{error}</DialogDescription>
</DialogHeader>
<DialogFooter className="flex justify-end">
<Button variant={"destructive"}>Close</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};
When I use
router.push
this causes the page to be rerendered/refetched. Which is not what I want. Is there a fix for this? or maybe a better way of passing the one off state from the redirect to /dashboard?