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

brewsterbhg
New Member
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 5 (5)
iain-campbell
Shopify Staff
54 9 22

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.

iain-campbell | Developer @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

brewsterbhg
New Member
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
54 9 22

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.

iain-campbell | Developer @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

tfchb
Tourist
8 1 1

Hi @brewsterbhg, did you fix this issue? 

vkiranmaniya
New Member
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.