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

[brewsterbhg]

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!

[iain-campbell]

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.

[brewsterbhg]

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]

> 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.

[tfchb]

Hi @brewsterbhg, did you fix this issue? 

[vkiranmaniya]

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]

Yes, I needed it!