What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Having trouble with client side routing using app-bridge-react

Having trouble with client side routing using app-bridge-react

brewsterbhg
Visitor
2 0 0
I'm working with an embedded React Shopify app (bootstrapped with create-react-app). I'm trying to follow the docs for the ClientRouter component in app-bridge-react: https://shopify.dev/tools/app-bridge/react-components/client-router but I'm fairly new to the Shopify ecosystem, and I can't seem to get the embedded routing to communicate with the navigation links set up in Shopify.

// index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react'
import { AppProvider } from '@shopify/polaris'
import translations from '@shopify/polaris/locales/en.json'
import '@shopify/polaris/styles.css'

import Router from './Router'
import app from './app' import './index.css' ReactDOM.render( <React.StrictMode> <BrowserRouter> <AppBridgeProvider config={{ apiKey: API_KEY, shopOrigin: SHOP_ORIGIN, }} > <Router />
<App /> </AppBridgeProvider> </BrowserRouter> </React.StrictMode>, document.getElementById('root') )
// Router.js

import { withRouter } from 'react-router-dom'
import { useClientRouting } from '@shopify/app-bridge-react'

const Router = (props) => {
  const { history } = props
  console.log(history.location) // always "/"

  useClientRouting(history)
 
  return null
}

export default withRouter(Router)

As I click the navigation links, the URL changes but the embedded app location always comes through as "/". I'd really appreciate if someone could help point me in the right direction!

Replies 6 (6)

iain-campbell
Shopify Staff (Retired)
54 9 23

Hi brewsterbhg!

 

What version of react-router-dom are you using? The example you provided is working for me with 5.x.x.

 

You could also try accessing React Router’s history object with the useHistory hook, although it's the same object (just a different way of getting at it), so that shouldn't change anything.

 

It's curious that the browser URL is being updated, but your app's URL isn't. That means the useClientRouting hook is working, but there may be an issue somewhere else in your routing system.

To learn more visit the Shopify Help Center or the Community Blog.

brewsterbhg
Visitor
2 0 0

Hi Iain,

 

I'm glad to hear that I'm at least on the right track, haha. I'm on 5.1.2. I actually did update it to using the useHistory hook after posting this example, but it still doesn't seem to be updated correctly. Could this be an issue with an incorrect AppBridgeProvider configuration?

iain-campbell
Shopify Staff (Retired)
54 9 23

Could this be an issue with an incorrect AppBridgeProvider configuration?

 

If you’re able to use any other App Bridge features successfully, then your AppBridgeProvider is configured correctly. If you’re testing your app in a development store, you should be able to use Redux Devtools to debug App Bridge.

To learn more visit the Shopify Help Center or the Community Blog.

tfchb
Tourist
8 1 1

Hi @brewsterbhg, did you fix this issue? 

vkiranmaniya
Visitor
2 0 0

App bridge seems working perfectly and I'm able to get the session token too. But it's happening the same as given in the question. Let me know if you need example code snippets to test with.

rohitmi89
Shopify Partner
2 0 0

Yes, I needed it!