Getting client side routing working with Shopify app-bridge-react

Question

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. The examples in the docs don't show how routing should look inside the React app.

// 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 './index.css'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <AppBridgeProvider
        config={{
          apiKey: API_KEY,
          shopOrigin: SHOP_ORIGIN,
        }}
      >
        <AppProvider i18n={translations}>
          <Router />
        </AppProvider>
      </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)

I've tried returning a Switch with routes inside of Router.js, but the history location is always "/" (though I can see the URL changing in the iframe). Any help would be appreciated.

score 0 · Answer 1 · answered Jun 19 '20 at 12:16

I am also trying to achieve client routing. I did which works but unfortunatly i need to set a state inside the index.js which is not recommended. Basically I am getting histroy in Router.js which I passed in each routes. So We are able to get history in each component and can be used all history methods.

Index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { AppProvider } from "@shopify/polaris";
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react';

import Dashboard from "./index";
import enTranslations from "@shopify/polaris/locales/en.json";
import MyRouter from '../utils/MyRouter';
import JavascriptTimeAgo from 'javascript-time-ago';
import en from 'javascript-time-ago/locale/en';
import { withRouter } from 'react-router-dom'
import { useClientRouting } from '@shopify/app-bridge-react'

JavascriptTimeAgo.addLocale(en);


const App = (props) => {
  const { apiKey, shopOrigin, domain, debug } = props;
  const [history, setHistory] = useState({})
  useClientRouting(history)

  const config = { apiKey, shopOrigin };
  const getHistory = (historyData) => {
    setHistory(historyData)
  }
  return (
    <React.Fragment>
      <BrowserRouter>
        <AppBridgeProvider config={config}>
          <AppProvider i18n={enTranslations}>
            <MyRouter getHistory={(history) => getHistory(history)} />
            <Switch>
              <Route exact path="/">
                <Dashboard domain={domain} shopOrigin={shopOrigin} history={history} />
              </Route>
            </Switch>
          </AppProvider>
        </AppBridgeProvider>
      </BrowserRouter>
    </React.Fragment>
  );
};

export default withRouter(App);

and Router.js

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

const Router = (props) => {
  const { history } = props
  console.log(history) // we are getting history here.

  useClientRouting(history)

  props.getHistory(history)

  return null
}

export default withRouter(Router)

Getting client side routing working with Shopify app-bridge-react

1 Answers1