Nested routes in Remix app

Shopify CLI and Libraries
1

Using the latest Shopify remix app template (GitHub - Shopify/shopify-app-template-remix) I can’t get nested routes to work.

For example, creating an app.additional.test.tsx file should in theory create the URL /app/additional/test, correct?

However, this simply resolves the output of the app.additional.tsx file.

2

Hi @James_A

Suggest avoiding using the word ‘test’

3

@kyle_liu I’ve tried multiple naming variations test/hello/new-page. Nothing seems to work.

For reference I’m using:

  • Shopify CLI v3.79.1
  • Node v20.16.0
  • Git v2.43.9

Right now I’ve got a link to a nested page in app.tsx:

    <AppProvider isEmbeddedApp apiKey={apiKey}>
      <NavMenu>
        <Link to="/app" rel="home">
          Home
        </Link>
        <Link to="/app/additional">Additional page</Link>
        <Link to="/app/additional/hello">Hello</Link>
      </NavMenu>
      <Outlet />
    </AppProvider>

Then in the file app.additional.hello.tsx I’ve got:

import {
  Box,
  Card,
  Layout,
  Link,
  List,
  Page,
  Text,
  BlockStack,
} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";

export default function AdditionalPage() {
  return (
    <Page>
      <TitleBar title="Testing page" />
      <Layout>
        <Layout.Section>
          <Card>
            <BlockStack gap="300">
              <Text as="p" variant="bodyMd">
                Testing...
              </Text>
              <Text as="p" variant="bodyMd">
                To create your own page and have it show up in the app
                navigation, add a page inside <Code>app/routes</Code>, and a
                link to it in the <Code>&lt;NavMenu&gt;</Code> component found
                in <Code>app/routes/app.jsx</Code>.
              </Text>
            </BlockStack>
          </Card>
        </Layout.Section>
        <Layout.Section variant="oneThird">
          <Card>
            <BlockStack gap="200">
              <Text as="h2" variant="headingMd">
                Resources
              </Text>
              <List>
                <List.Item>
                  <Link
                    url="https://shopify.dev/docs/apps/design-guidelines/navigation#app-nav"
                    target="_blank"
                    removeUnderline
                  >
                    App nav best practices
                  </Link>
                </List.Item>
              </List>
            </BlockStack>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

function Code({ children }: { children: React.ReactNode }) {
  return (
    <Box
      as="span"
      padding="025"
      paddingInlineStart="100"
      paddingInlineEnd="100"
      background="bg-surface-active"
      borderWidth="025"
      borderColor="border"
      borderRadius="100"
    >
      <code>{children}</code>
    </Box>
  );
}

Which is a slight variation of the default app.additional.tsx file provided in the Remix template.

Changing the file route to app.hello.tsx works. But having it nested as app.additional.hello.tsx does not - it just shows the app.additiona.tsx data.

4

Hi there :waving_hand:

I would recommend taking a look at the Remix documentation regarding routing.

In your specific scenario, you probably want to define your route like this app.additional_.hello.jsx, for Nested URLs without layout nesting

Sometimes you want the URL to be nested, but you don’t want the automatic layout nesting. You can opt out of nesting with a trailing underscore on the parent segment:

1 Like
5

Try this:

rename app.tsx to _app.tsx

Then

rename app.additional.hello.tsx to _app.additional.hello.tsx

This is how I have it working:

This is my _product-layout.tsx:

import { Outlet } from '@remix-run/react';

export default function HomeLayout() {
  return (
    <div className="">
      <Outlet />
    </div>
  );
}

and my _product-layout.products.$handle.tsx renders into the outlet.