Why isn't my CDN-hosted AppBridge redirecting as expected?

[genmancoder]

I'm trying to make use of the cdn-hosted appbridge and followed the docs carefully:

<script src="https://unpkg.com/@shopify/app-bridge@3"></script>
<script>
  var AppBridge = window['app-bridge'];

  const config = {
    apiKey: "...",
    host: new URLSearchParams(location.search).get("host"),    
    forceRedirect: true
};

  const app = AppBridge.createApp(config);

    const Redirect = AppBridge.actions.Redirect;
    const redirect = Redirect.create(app);

let btn = document.getElementById('newProductLink');

btn?.addEventListener('click', function(){

    console.log('clicking')


    redirect.dispatch(Redirect.Action.APP, '/view/sample/home/newform.php');

    console.log('clicked')

});

The code above should work but once the button is clicked, it's not redirecting to the file specified. Any help is appreciated. Thank you.

[EcomGraduates]

Hello there  

Make sure you're using the correct Redirect.Action value when creating the redirect. It looks like you're using Redirect.Action.APP, which will navigate to a different page within the app. If you want to navigate to an external URL, you should use Redirect.Action.REMOTE. Here's an updated version of your code that should work:

<script src="https://unpkg.com/@shopify/app-bridge@3"></script>
<script>
  var AppBridge = window['app-bridge'];

  const config = {
    apiKey: "...",
    host: new URLSearchParams(location.search).get("host"),    
    forceRedirect: true
  };

  const app = AppBridge.createApp(config);

  const Redirect = AppBridge.actions.Redirect;
  const redirect = Redirect.create(app);

  let btn = document.getElementById('newProductLink');

  btn?.addEventListener('click', function(){
    redirect.dispatch(Redirect.Action.REMOTE, 'https://example.com/view/sample/home/newform.php');
  });
</script>

the Redirect.Action.REMOTE value is used, and the URL to redirect to has been updated to https://example.com/view/sample/home/newform.php. Make sure to replace this value with the correct URL for your file.

I hope this helps!

[genmancoder]

Thank you for the response but I tried your solution and it didn't worked. I tried debugging it with Redux Dev Tools but I can't see any action being dispatched when I click the link or button.