Routing

Qumra apps use React Router v7 with file-based routing.

Route Configuration

Routes are automatically generated from the file structure in the app/routes/ directory using the flatRoutes helper.

app/routes.ts

import { flatRoutes } from "@react-router/fs-routes";
export default flatRoutes();

Route Examples

Basic Page Route

A simple page route that renders a React component.

app/routes/about.tsx

export default function About() {
  return (
    <div>
      <h1>About</h1>
      <p>This is the about page.</p>
    </div>
  );
}

Authenticated Route with Server Loader

Use authenticate.admin in a loader to protect routes and fetch data from the Qumra API.

app/routes/_index.tsx

import { authenticate } from "~/qumra.server";

export async function loader({ request }: { request: Request }) {
  const { admin } = await authenticate.admin(request);

  const data = await admin.graphql(`
    query {
      shop {
        name
        email
      }
    }
  `);

  return Response.json(data);
}

export default function Index() {
  return (
    <div>
      <h1>Dashboard</h1>
    </div>
  );
}

Webhook Action Route

Webhook handlers export an action function to process incoming POST requests.

app/routes/webhooks.product-create.tsx

import { authenticate } from "~/qumra.server";

export async function action({ request }: { request: Request }) {
  const { payload, topic } = await authenticate.admin(request);

  console.log("Received webhook:", topic, payload);

  return Response.json({ success: true });
}

OAuth Callback Catch-All

The $ segment creates a catch-all route that matches any path under /auth/.

app/routes/auth.$.tsx

import { authenticate } from "~/qumra.server";

export async function loader({ request }: { request: Request }) {
  await authenticate.admin(request);
  return null;
}

File Naming Conventions

File Name	URL Path	Description
_index.tsx	/	Index (home) route
about.tsx	/about	Basic page route
auth.$.tsx	/auth/*	Catch-all route under /auth/
product-create.tsx	/product-create	Hyphenated path segment
webhooks.products.tsx	/webhooks/products	Dot separator creates nested path

معلومة

File names map directly to URL paths. The dot separator (.) creates nested paths, while $ creates catch-all segments.