React SPA Reloads on Navigation

[vkiranmaniya]

I have a React SPA with MemoryRouter and Redux. It's an embedded app, so it's being loaded inside an iframe. The problem is, upon navigation from the app, the entire SPA refreshes causing the app state loss. I've applied few fixes to make it work but none of them look working. Here is what I tried.

1. useClientRouting hook

I've used shopify client router inside the Memory router as given.

ClientRouter.js

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

const ClientRouter = (props) => {
  const {history} = props;
  useClientRouting(history);
  
  return null;
}
export default withRouter(ClientRouter);

App.js, Router is MemoryRouter

<Router>
      <Layout>
        <Sidebar router={router} />
        <Layout>
          <Header />
          <Content className="app-layout-content">
            <ClientRouter />
            <Switch>
              {router.map((route) => {
                if (route.children) {
                  return route.children.map((child) => (
                    <Route
                      path={`${route.path}${child.path}`}
                      component={child.component}
                      key={child.title}
                      exact={child.exact}
                    />
                  ));
                } else {
                  return (
                    <Route
                      path={route.path}
                      component={route.component}
                      key={route.title}
                      exact={route.exact}
                    />
                  );
                }
              })}
            </Switch>
          </Content>
          <Footer />
        </Layout>
      </Layout>
    </Router>

Still, the App refreshes inside an iframe. Any workaround?