Embedded app Redirect not working

Solved
Highlighted
Excursionist
13 2 0

Hello, I tried to use redirect 

But it does not work, neither Action.APP nor remote
my package json

"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@shopify/app-bridge": "^1.6.8",
"@shopify/app-bridge-react": "^1.6.8",
"@shopify/polaris": "^4.2.1",
"@shopify/react-shopify-app-route-propagator": "^3.0.2",
"@zeit/next-css": "^1.0.1",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"fetch": "^1.1.0",
"immutability-helper": "^3.0.1",
"next": "^9.0.6",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-addons-update": "^15.6.2",
"react-dom": "^16.10.2",
"react-router-dom": "^5.0.1"
}

 

Here are a few examples that I have tried already:

I dont see any errors, and console.log('Redirect') is working, so dispatch method does not work 

 

class IndexPage extends React.Component
{

render() {

const primaryAction = {content: 'save', url: '/save'};

const handleRedirect = () => {
console.log('redirect')
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, '/tasks');
};


return (
<Provider config={config} >
<TitleBar title={"MyApp"} primaryAction={primaryAction} />

<AppProvider i18n={{}}>
<div>
<Button onClick={handleRedirect}>Redirect me please</Button>

</div>
</AppProvider>
</Provider>
);
}


}
ReactDOM.render(<IndexPage router={AppRouter}/>, document.getElementById('my-site'));

const app = createApp({
apiKey: 'key',
shopOrigin: 'myshop.myshopify.com',
});
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, '/tasks');

This does not work


 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
26 7 10

Hi Neok,

 

Can you show the code where you're importing `Redirect`? Also, can you try out the development build of App Bridge and see if there are any errors?

 

It might also be useful to set up Redux DevTools to see if the action is successfully dispatched.

0 Likes
Highlighted
Excursionist
13 2 0

`

import {Redirect, History} from '@shopify/app-bridge/actions';

and i tried development build and no errors 

0 Likes
Highlighted
Excursionist
13 2 0

Full code of my index.jsx file

import React from 'react';
import ReactDOM from 'react-dom';
import '@shopify/polaris/styles.css';
import {Provider, TitleBar} from '@shopify/app-bridge-react';
import createApp from '@shopify/app-bridge/development';
import {Redirect} from '@shopify/app-bridge/actions';
import {AppProvider, Button} from '@shopify/polaris';

const config = {
apiKey: "SECRET",
shopOrigin: ORIGIN
};
const app = createApp(config);


class IndexPage extends React.Component
{

render() {

const primaryAction = {content: 'save', url: '/save'};
const redirectToProduct = () => {
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, '/tasks');
};


return (
<Provider config={config} >
<TitleBar title={"App"} primaryAction={primaryAction} />
<AppProvider i18n={{}}>
<Button onClick={redirectToProduct}>Redirect me please</Button>

</AppProvider>
</Provider>
);
}


}
ReactDOM.render(<IndexPage />, document.getElementById('my-site'));

 

And I create a navigation routes in my embedded app so I have `/tasks` route 

0 Likes
Highlighted

Success.

Excursionist
13 2 0

Sorry, just tried again and it's working, sorry 
this is strange :/

0 Likes
Highlighted
Shopify Staff
Shopify Staff
26 7 10

Hi Neok,

 

I'm glad it's working for you now! Just a note that when you're using app-bridge-react, you should try to use the same app instance from the `<Provider>` instead of calling `createApp` to create another instance of the app.  Creating 2 instances of the app might result in strange behaviours.

 

You should be able to modify your code as follows:

 

 

import React from 'react';
import ReactDOM from 'react-dom';
import '@shopify/polaris/styles.css';
import {Context, Provider, TitleBar} from '@shopify/app-bridge-react';
import {Redirect} from '@shopify/app-bridge/actions';
import {AppProvider, Button} from '@shopify/polaris';

const config = {
    apiKey: "SECRET",
    shopOrigin: ORIGIN
};
class IndexPage extends React.Component { static contextType = Context; render() {
// Access the same app instance from <Provider/> const app = this.context; const primaryAction = {content: 'save', url: '/save'}; const redirectToProduct = () => { const redirect = Redirect.create(app); redirect.dispatch(Redirect.Action.APP, '/tasks'); }; return ( <AppProvider i18n={{}}> <TitleBar title={"App"} primaryAction={primaryAction} /> <Button onClick={redirectToProduct}>Redirect me please</Button> </AppProvider> ); } } function MyApp() { return ( <Provider config={config}> <IndexPage /> </Provider> ); } ReactDOM.render(<MyApp />, document.getElementById('my-site'));

 

Cheers,

 

Trish

1 Like
Shopify Expert
418 29 80

Hi @Trish_Ta, could you please help me out on getting redirects working?

I followed the documentation here: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/navigation/redirect

 

But the redirect isn't working for me.

 

Here's what I have:

 

import React from "react";
import createApp from "@shopify/app-bridge"; import { Redirect } from "@shopify/app-bridge/actions"; const app = createApp({ apiKey: "api_key", shopOrigin: "myshopify_url", forceRedirect: true // not sure if needed but I tried with and without }); const redirect = Redirect.create(app); class Page extends React.Component { handleButtonClick = () => { redirect.dispatch(Redirect.Action.APP, "/help"); console.log(app); console.log(redirect); console.log(Redirect); } render() { ... } }
export default Page;

 

 

The 3 console.log statements all produce objects with data in them, but the redirect doesn't work.

 

This component is in a parent like this:

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { AppProvider } from "@shopify/polaris";

class App extends React.Component {
  render() {
    return (
      <AppProvider>
        <Router>
            <Route path="/page" component={Page} />
            ...

 

I'm using <Router> from react-router-dom, I'm wondering if that is causing interference of some sort?

 

Navigation works fine otherwise, I just can't get a Redirect to happen.

 

I can change views in my app, but the URL doesn't change and the wrong navigation link is highlighted, so I'm trying to change the URL.

 

I've also setup Redux Dev Tools and read this: https://help.shopify.com/en/api/embedded-apps/app-bridge/debugging.

 

No action is taken when the dispatch statement is being called. It seems like it's just not executing.

 

Any advice on what's wrong or how I can further debug to find why that redirect is not dispatching?

Thanks

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Order Automator (app that auto fulfills orders, adds tags, emails).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes
Highlighted
Shopify Staff
Shopify Staff
26 7 10

Hi Joe,

 

Your code looks correct to me but there might be something else going on. Could you try using the development version of App Bridge and see if there are any errors? You can import it like this:

 

import createApp from '@shopify/app-bridge/development'; 

 

0 Likes
Highlighted
Shopify Expert
418 29 80

Thanks Trish, I tried this but got the same results. No errors, and all 3 console.log statements are populating.

I'm just not sure what I should be looking for to try and debug this. I followed Shopify documentation exactly, but it's not working and not reporting an error.

 

I did some more experimentation and can't see why it's not firing the navigation change. There are no other errors in the app, navigation works fine I just can't get the url / nav highlight to change.

 

 

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Order Automator (app that auto fulfills orders, adds tags, emails).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes
Highlighted
Shopify Staff
Shopify Staff
26 7 10

Joe, can you clarify this comment?

 

There are no other errors in the app, navigation works fine I just can't get the url / nav highlight to change.

Does this mean that your app navigates to the requested url but the browser url is not updating?  Also, can you confirm that you're testing the app by opening it in a development Shopify store?

0 Likes