Hello,

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?