Ngrok hosted app's routing does not work properly

Shopify Apps

Topic summary

A developer is experiencing routing issues with a Shopify app built using the Node.js template and hosted on ngrok. Core Problem: Every page refresh causes the entire application to restart and redirects users back to the home page, disrupting normal navigation flow.

Technical Context:

  • Using React Router (BrowserRouter) for client-side routing
  • App includes Apollo Client, Shopify App Bridge, and Polaris components
  • Routes include HomePage, CampaignDashboard, and CreateCampaign components
  • Code snippets show standard React/Shopify app setup with authentication handling

Current Status: The issue has been persistent throughout development. The developer is seeking guidance on whether this is a configuration problem (ngrok-specific setup, Shopify App Bridge settings) or a code-level issue in their routing implementation. No responses or solutions have been provided yet.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

I am developing my application using the node.js template and hosted on ngrok.

Whenever I refresh the page, the entire application is restarted and I am therefore put back to the home page?

This has been happening the entire time, is there some specific setup or is there something in my code that’s wrong?

Thanks!

App.tsx

import {
  BrowserRouter as Router,
  Routes,
  Route,
  useLocation,
  useNavigate,
  Navigate,
  createBrowserRouter
} from "react-router-dom";
import {
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache,
} from "@apollo/client";
import {
  Provider as AppBridgeProvider,
  useAppBridge,
} from "@shopify/app-bridge-react";
import { authenticatedFetch } from "@shopify/app-bridge-utils";
import { Redirect } from "@shopify/app-bridge/actions";
import {
  AppProvider as PolarisProvider,
  Frame,
  Layout,
  Page,
} from "@shopify/polaris";
import translations from "@shopify/polaris/locales/en.json";
import "@shopify/polaris/build/esm/styles.css";
import { Provider } from "react-redux";
import { store } from "./redux/store";

import { HomePage } from "./components/HomePage";
import { CampaignDashboard } from "./components/campaign/CampaignDashboard";
import CreateCampaignContainer from "./components/campaign/CreateCampaignContainer";
import { useEffect, useState } from "react";
import { CreateCampaignComponent } from "./components/campaign/CreateCampaign";

export default function App() {

 
  return (
    
  );
}

function MyProvider({ children }) {
  const app = useAppBridge();

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      credentials: "include",
      fetch: userLoggedInFetch(app),
    }),
  });

  return ;
}

export function userLoggedInFetch(app) {
  const fetchFunction = authenticatedFetch(app);

  return async (uri, options?) => {
    const response = await fetchFunction(uri, options);

    if (
      response.headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1"
    ) {
      const authUrlHeader = response.headers.get(
        "X-Shopify-API-Request-Failure-Reauthorize-Url"
      );

      const redirect = Redirect.create(app);
      redirect.dispatch(Redirect.Action.APP, authUrlHeader || `/auth`);
      return null;
    }

    return response;
  };
}

index.tsx

import { createRoot } from 'react-dom/client';
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const container = document.getElementById('app');
const root = createRoot(container);
root.render(
  
);