# Add a page (https://docs.salla.dev/twilight/react/recipes/add-a-page)



<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

Use this when the storefront needs a URL the engine does not have. This is the short version; [Add a custom route](https://docs.salla.dev/twilight/react/routes/add-a-custom-route) covers loaders, titles and loading states.

**Goal:** `/faq` (and `/ar/faq`, `/en/faq`) shows your page.

### Declare the path [#declare-the-path]

```ts title="app/routes.ts"
import { route } from '@tanstack/virtual-file-routes';

export const routes = [route('/faq', 'faq.tsx')];
```

### Write the route file [#write-the-route-file]

The `createFileRoute` path is the same URL with the optional `{-$locale}` prefix in front.

```tsx title="app/routes/faq.tsx"
import { createFileRoute } from '@tanstack/react-router';
import { useTranslation } from '@salla.sa/twilight-theme-engine/i18n';

function FaqPage() {
  const { t } = useTranslation();
  return (
    <div className="container">
      <h1>{t('pages.faq.title', 'Frequently asked questions')}</h1>
    </div>
  );
}

export const Route = createFileRoute('/{-$locale}/faq')({
  head: () => ({ meta: [{ title: 'FAQ' }] }),
  component: FaqPage,
});
```

### Restart and open it [#restart-and-open-it]

Restart the dev server so the route tree is regenerated, then open `/faq`. Add the `pages.faq.title` key to both locale files: [Add translation keys](https://docs.salla.dev/twilight/react/recipes/add-translation-keys).

## Check it worked [#check-it-worked]

`/faq` and `/ar/faq` both render the heading. If one gives a 404, see the traps.

<Callout type="warn" title="Traps">
  * **A 404 right after adding the route** means the route tree is stale. Restart the dev server.
  * **Forgetting `{-$locale}`** in the `createFileRoute` path makes the page unreachable under `/ar/...` and `/en/...`.
  * **Never put `// @auto-generated` at the top of a route file you wrote.** The plugin treats that marker as disposable and overwrites the file on the next build.
  * **Dynamic segments** use TanStack syntax: `route('/promotions/$id', 'promotions.$id.tsx')`. Read the value with `Route.useParams()`.
</Callout>

## Next [#next]

* [Add a custom route](https://docs.salla.dev/twilight/react/routes/add-a-custom-route): data loading, head and skeletons.
* [Routes and pages](https://docs.salla.dev/twilight/react/guide/routes-and-pages): how routes fit together.
* To change a page the engine already ships, [fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route).