# Overview (https://docs.salla.dev/twilight/react/routes)
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).
Every storefront page a customer can open, from the home page to an order confirmation, is already built into the engine. This section lists them all and shows how to change one, or add a page the engine does not have. Start here to find the page you want to change.
A **route** is one URL pattern plus the code that answers it: a `loader` that fetches the data, a `head` that sets the title and meta tags, and a component that draws the page. For the concepts behind this, read [Routes and pages](https://docs.salla.dev/twilight/react/guide/routes-and-pages).
## What do you want to do? [#what-do-you-want-to-do]
Take over a route file, or point the same URL at your own file.
Serve a URL the engine does not have, such as `/faq`.
Use the table below, then open the page for its params and loader.
See which redirects exist and how to add your own.
## How built-in routes work [#how-built-in-routes-work]
When your theme builds, the engine writes one small file per route into `app/routes/`. These files are stubs: they wire the engine's `loader`, `head` and component into the router, and nothing more. Every stub starts with this line:
```tsx title="app/routes/cart.tsx"
// @auto-generated
```
* **While the first line is there**, the engine owns the file and rewrites it when a new engine version changes the stub. Do not edit it.
* **Delete the line** and the file is yours. The engine never touches it again, but it also stops updating it, so you keep the wiring in sync yourself.
* **A missing file** is written again.
Some routes add no file to `app/routes/` at all: the engine writes their stubs into its own `.twilight/` folder and serves them from there. These are every product list ([search](https://docs.salla.dev/twilight/react/routes/search), [products](https://docs.salla.dev/twilight/react/routes/products), [category](https://docs.salla.dev/twilight/react/routes/category), [tag](https://docs.salla.dev/twilight/react/routes/tag), [brand](https://docs.salla.dev/twilight/react/routes/brand)), [product reviews](https://docs.salla.dev/twilight/react/routes/reviews), and the redirects from old Twig addresses (pending orders, `/account/rating`, the five short account URLs, and `/latest-products`, `/most-sales-products` and `/offers`). To replace one, add a file of the same name to `app/routes/` (for example `app/routes/search.tsx`) without the `// @auto-generated` line, and the build uses yours. They are marked *engine* in the table below.
Each page in this section shows its real stub and a customised version. To change a page without touching the stub, point the same URL at your own file from `app/routes.ts`, as described in [Fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route).
Never add `// @auto-generated` to a file you wrote. The next build overwrites it.
## URL anatomy [#url-anatomy]
All storefront URLs follow the same shape.
| Part | Example | Notes |
| --------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Optional locale | `/ar/cart` | `{-$locale}` in route paths. `/ar/cart` is the Arabic cart. A URL without the prefix redirects to one with it, see [Locale prefix](https://docs.salla.dev/twilight/react/routes/home#locale-prefix). |
| Store segment | `/my-store/cart` | Only on shared development and preview hosts, where one host serves many stores. The router adds and strips it, so route files never include it. |
| `$slug` | `/red-shoes/p123` | A readable name for people and search engines. |
| Short id | `p123`, `c123`, `brand-123`, `tag-123`, `page-123` | The part the loader uses. The letters before the number say what kind of page it is. |
In a route path, `$id` is a param and `{$id}` is a param inside a segment, so `/$slug/p{$id}`
matches `/red-shoes/p123` with `id = 123`. The `$slug` of the catalog and blog pages is cosmetic:
the loaders read only `id`.
## Every route [#every-route]
Open a page for its params, what it loads and its edge cases. Every page uses the same sections: URL, route file, what it loads, edge cases.
| Page | URL | Route file | Docs |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| Home | `/` | `index.tsx` | [Home](https://docs.salla.dev/twilight/react/routes/home) |
| Cart | `/cart` | `cart.tsx` | [Cart](https://docs.salla.dev/twilight/react/routes/cart) |
| Search | `/search` | `search.tsx` (*engine*) | [Search](https://docs.salla.dev/twilight/react/routes/search) |
| Products | `/products?source=latest\|sales\|offers\|reorder` | `products.tsx` (*engine*) | [Products](https://docs.salla.dev/twilight/react/routes/products) |
| Product | `/$slug/p{$id}` | `$slug.p$id.tsx` | [Product](https://docs.salla.dev/twilight/react/routes/product) |
| Category | `/$slug/c{$id}` | `$slug.c$id.tsx` (*engine*) | [Category](https://docs.salla.dev/twilight/react/routes/category) |
| Brand products | `/$slug/brand-{$id}` | `$slug.brand-$id.tsx` | [Brand products](https://docs.salla.dev/twilight/react/routes/brand-products) |
| Tag | `/$slug/tag-{$id}`, `/tags/$id` | `$slug.tag-$id.tsx`, `tags.$id.tsx` (*engine*) | [Tag](https://docs.salla.dev/twilight/react/routes/tag) |
| Custom page | `/$slug/page-{$id}` | `$slug.page-$id.tsx` | [Custom page](https://docs.salla.dev/twilight/react/routes/custom-page) |
| Brands | `/brands` | `brands.tsx` | [Brands](https://docs.salla.dev/twilight/react/routes/brands) |
| Brand | `/brands/$id` | `brands.$id.tsx` (*engine*) | [Brand](https://docs.salla.dev/twilight/react/routes/brand) |
| Blog | `/blog` | `blog.tsx` | [Blog](https://docs.salla.dev/twilight/react/routes/blog) |
| Blog article | `/blog/$slug/a-{$id}` | `blog_.$slug.a-$id.tsx` | [Blog article](https://docs.salla.dev/twilight/react/routes/blog-article) |
| Blog category | `/blog/$slug/c-{$id}` | `blog_.$slug.c-$id.tsx` | [Blog category](https://docs.salla.dev/twilight/react/routes/blog-category) |
| Blog tag | `/blog/$slug/tag-{$id}` | `blog_.$slug.tag-$id.tsx` | [Blog tag](https://docs.salla.dev/twilight/react/routes/blog-tag) |
| Blog author | `/blog/author/$id` | `blog_.author.$id.tsx` | [Blog author](https://docs.salla.dev/twilight/react/routes/blog-author) |
| Account | `/account` | `account.tsx` | [Account](https://docs.salla.dev/twilight/react/routes/account) |
| Profile | `/account/profile` | `account.profile.tsx` | [Account profile](https://docs.salla.dev/twilight/react/routes/account-profile) |
| Wishlist | `/account/wishlist` | `account.wishlist.tsx` | [Account wishlist](https://docs.salla.dev/twilight/react/routes/account-wishlist) |
| Wallet | `/account/wallet` | `account.wallet.tsx` | [Account wallet](https://docs.salla.dev/twilight/react/routes/account-wallet) |
| Notifications | `/account/notifications` | `account.notifications.tsx` | [Account notifications](https://docs.salla.dev/twilight/react/routes/account-notifications) |
| Settings | `/account/settings` | `account.settings.tsx` | [Account settings](https://docs.salla.dev/twilight/react/routes/account-settings) |
| Orders | `/account/orders` | `account.orders.tsx` | [Account orders](https://docs.salla.dev/twilight/react/routes/account-orders) |
| Order | `/account/orders/$id` | `account.orders.$id.tsx` | [Account order](https://docs.salla.dev/twilight/react/routes/account-order) |
| Pending orders | `/pending-orders`, `/account/pending_orders` | `pending-orders.tsx`, `account.pending_orders.tsx` (*engine*) | [Pending orders](https://docs.salla.dev/twilight/react/routes/pending-orders) |
| Logout | `/logout` | `logout.tsx` | [Logout](https://docs.salla.dev/twilight/react/routes/logout) |
| Loyalty | `/loyalty`, `/loyalty_points` | `loyalty.tsx`, `loyalty_points.tsx` | [Loyalty](https://docs.salla.dev/twilight/react/routes/loyalty) |
| Testimonials | `/testimonials` | `testimonials.tsx` | [Testimonials](https://docs.salla.dev/twilight/react/routes/testimonials) |
| Product reviews | `/reviews` | `reviews.tsx` (*engine*) | [Product reviews](https://docs.salla.dev/twilight/react/routes/reviews) |
| Thank you | `/thankyou/$orderId` | `thankyou.$orderId.tsx` | [Thank you](https://docs.salla.dev/twilight/react/routes/thank-you) |
| SEO redirects | `/$slug/brand-{$id}`, `/pending-orders`, `/account/pending_orders`, `/logout`, `/account/rating`, `/profile`, `/orders`, `/wishlist`, `/wallet`, `/notifications`, `/latest-products`, `/most-sales-products`, `/offers` | the redirect-only files: `$slug.brand-$id.tsx` and `logout.tsx` in your theme; `account.rating.tsx`, `profile.tsx`, `orders.tsx`, `wishlist.tsx`, `wallet.tsx`, `notifications.tsx`, `latest-products.tsx`, `most-sales-products.tsx` and `offers.tsx` (*engine*) | [SEO redirects](https://docs.salla.dev/twilight/react/routes/seo-redirects) |
| Not found | any URL no route matches | none (built into the router) | [Not found](https://docs.salla.dev/twilight/react/routes/not-found) |
Every URL above also exists under the optional locale prefix (`/ar/cart`).
Things to know about the table:
* **Redirect-only routes.** The brand slug URL, both pending-orders URLs, `/logout`, `/account/rating`, the five short account URLs (`/profile` and so on) and Twig's three listing URLs (`/latest-products`, `/most-sales-products`, `/offers`) have no page of their own. Their stubs hold a `loader` or a redirect component and no page component.
* **The account section** is one layout (`/account`) with the pages under it. The account pages need a signed-in customer.
* **Two tag URLs, two brand URLs.** `/tags/$id` and `/$slug/tag-{$id}` both show a tag's products. `/brands/$id` shows a brand's products, and `/$slug/brand-{$id}` redirects to it.
## Next [#next]
* [Add a custom route](https://docs.salla.dev/twilight/react/routes/add-a-custom-route): serve a URL the engine does not have
* [Home](https://docs.salla.dev/twilight/react/routes/home): the first built-in page, then Cart, Search and the catalog pages in the sidebar order
* [Routes and pages](https://docs.salla.dev/twilight/react/guide/routes-and-pages): how routes, loaders and components fit together
* [Fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route) and [Add a page](https://docs.salla.dev/twilight/react/recipes/add-a-page): the short recipes