How can I link products to an embedded app's edit page?

[FraukeFvdz]

I'm creating an embedded app. I have a list of products that are linked to my app.

In my app I want to be able to redirect the user to the edit page of the product when they click on it.

How can I do this?

[remy727]

Yes.

You can use Redirect action.

import {useNavigate} from '@shopify/app-bridge-react';

function MyComponent {
  const navigate = useNavigate();

  return (
    <Link onClick={() => {
      navigate({
        name: 'Product',
        resource: {
          id: '123',
        }
      });
    }}>Deluxe collection</Link>
  );
}

[FraukeFvdz]

Thanks for your reply.

Now I'm stuck adding app bridge to my embedded app.
The Provider needs an app bridge config object.
I'm having a hard time to fill in the host in this object.

In the documentation it states: 

host: new URLSearchParams(location.search).get("host"),

But location or window.location is not defined in my embedded app.

Do you know another way to get the host? I searched and searched but I didn't found an answer 😞

[remy727]

Is this code helpful for you?