How to navigate to a customer-account.order.page.render extension from an order action button?

Technical Q&A
1

Body:

Hi Shopify Community,

I’m building a customer account UI extension and I’m stuck on navigation between extensions.

What I’m trying to do:

  • I have an order action menu button (customer-account.order.action.menu-item.render)
  • When clicked, it opens a modal (customer-account.order.action.render)
  • From that modal, I want to navigate to a full-page extension using customer-account.order.page.render target

What I’ve tried:

  1. Using to prop with extension:{handle} format - doesn’t work
  2. Using to prop with extension:$handle format - doesn’t work
  3. Using href prop with various formats - doesn’t work
  4. Using shopify:customer-account/orders/{orderId}/pages/{uid} - doesn’t work

All attempts result in: “Extension for {handle} not found to navigate to”

My configuration:

Full page extension

api_version = "2025-07"

[[extensions]]
name = "Order Edit Page"
handle = "order-full-page-edit-a9sd8f"
type = "ui_extension"
uid = "XXXXXXXXXX"

[[extensions.targeting]]
module = "./src/OrderEditPage.tsx"
target = "customer-account.order.page.render"

[extensions.capabilities]
api_access = true

Order action item

api_version = "2025-07"

[[extensions]]
name = "Order edit button"
handle = "order-edit-button"
type = "ui_extension"
uid = "XXXXXXXXX"

[[extensions.targeting]]
module = "./src/OrderEditActionButton.tsx"
target = "customer-account.order.action.menu-item.render"

My order action item code:

import {
    Button,
    reactExtension,
    useApi
} from "@shopify/ui-extensions-react/customer-account";
import {useEffect} from "react";

const TARGET = 'customer-account.order.action.menu-item.render';
export default reactExtension(TARGET, (api) => <OrderEditActionButton orderId={api.orderId}/>);

function OrderEditActionButton({orderId}: { orderId: string }) {

    // Extract numeric ID from GID
    const extractIdFromGid = (gid: string) => {
        const parts = gid.split('/');
        return parts[parts.length - 1];
    };


    return <Button to={`extension:order-full-page-edit-a9sd8f/order/${extractIdFromGid(orderId)}`}>Edit Order</Button>;
}

Question:
Is it possible to programmatically navigate to a customer-account.order.page.render extension from a button? If yes, what’s the correct URL format or navigation method?

The documentation mentions that customer-account.order.page.render “does not allow direct linking” but also says to “create an order action extension” to link to it. I’m confused about how this is supposed to work.

Any help would be greatly appreciated!