Missing Shop and Host Parameters

[imrulkayessifat]

When i navigate to another page and back to main page it shows : Missing Shop and Host Parameters.But after reloading the page the error is gone.The cause of this problem is when i redirect to main page ,url search params does not contain shop and host params.But how can i solve it?.Is there any way to get shop and accessToken through session in server component?

[ozzyonfire]

So in order to fix this with my own app, I had to use my own router hook that injects the url everytime we navigate.

So in the root page.tsx, we can check and verify the shop and host if present (however since we've switched to a managed configuration it's less of an issue).

And to navigate around the app I used this hook

import { useAppBridge } from "@shopify/app-bridge-react";
import { useRouter } from "next/navigation";

export function useAppRouter() {
  const router = useRouter();
  const shopify = useAppBridge();
  const push = (url: string) => {
    const query = new URLSearchParams();
    query.append("shop", shopify.config.shop);
    query.append("host", shopify.config.host || "");
    router.push(`${url}?${query.toString()}`);
  };
  return { push, router };
}

It's not pretty, and it would need to be tweaked if you wanted to pass along other params with your url, but you get the idea. This way the server can actually get the shop and host whenever we are redirected to a new page.

I will put in a PR with these changes to the template.