Remix template navigation

Retired Boards Appdev Authentication

Topic summary

A developer is experiencing inconsistent navigation issues in a Remix template application when trying to navigate to a custom /create page.

Working Setup:

  • Basic useNavigate from @remix-run/react functions correctly
  • Navigation to the default /additional page works consistently

Problem Behavior:

  • Navigation to /create page fails intermittently when triggered by button clicks
  • The issue appears related to components within the /create page itself
  • Behavior is very random: sometimes works with the same configuration, sometimes doesn’t

Environment Details:

  • Only occurs after deploying to Heroku or Fly (not in local dev mode)
  • Multiple component configurations have been tested without consistent success
  • Application uses Shopify Polaris components and App Bridge React

Status: The issue remains unresolved with no clear pattern identified for the navigation failures.

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

I’m having issues with navigation into specific screens on my remix template application.

The following text snippets works just fine

import { useNavigate } from "@remix-run/react";
...

const AppPage = () => {
  const navigate = useNavigate();
  ...

  
}

However, when I try to add a custom page into the app:

// app/routes/app._index.tsx
import { useNavigate } from "@remix-run/react";
...
const AppPage = () => {
  const navigate = useNavigate();
  ...

  
  
}

// app/routes/app.create.tsx
import { Card, Layout, Page, Text, BlockStack } from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import FormProvider from "~/components/Form/FormProvider";

export default function AdditionalPage() {
  return (
    
  );
}

I am unable to navigate into the /create page by clicking the button that has call to the navigation function. This seems to be caused by the components inside the /create page. I’ve tried a lot of different configurations of components, but sometimes the same configuration works, while the other time it does not, which seems to be very random. Navigating into the default /additional page works fine every time.

This issue is only happening after deploying the application to heroku or fly. Running it locally on dev mode works just fine.

1 Like