Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

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

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: 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 "/"

  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)

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.

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?

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.

8 1 1

Hi @brewsterbhg, did you fix this issue? 

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.

Shopify Partner
2 0 0

Yes, I needed it!