# Account (https://docs.salla.dev/twilight/react/routes/account)



<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>

Every signed-in page (profile, orders, wallet and the rest) shows inside one frame: a breadcrumb, a title, and a user menu on large screens. That frame is the `/account` layout. Read this page when you want to retitle a page in the frame, show your own skeleton while it loads, or style account pages differently from the rest of the store.

## URL [#url]

`/account` is a **layout route**: it has no page of its own. It wraps whichever child page matches.

| URL                                       | Renders                                                |
| ----------------------------------------- | ------------------------------------------------------ |
| `/account`                                | the frame with an empty body, because no child matches |
| `/account/profile`, `/ar/account/profile` | the frame around [Profile](https://docs.salla.dev/twilight/react/routes/account-profile)    |

The children are [profile](https://docs.salla.dev/twilight/react/routes/account-profile), [wishlist](https://docs.salla.dev/twilight/react/routes/account-wishlist), [wallet](https://docs.salla.dev/twilight/react/routes/account-wallet), [notifications](https://docs.salla.dev/twilight/react/routes/account-notifications), [settings](https://docs.salla.dev/twilight/react/routes/account-settings), [orders](https://docs.salla.dev/twilight/react/routes/account-orders) and [one order](https://docs.salla.dev/twilight/react/routes/account-order). [Pending orders](https://docs.salla.dev/twilight/react/routes/pending-orders) is also nested here, but it only redirects.

The only param is the optional locale (`{-$locale}`). See [Languages and RTL](https://docs.salla.dev/twilight/react/guide/languages-and-rtl).

## Route file [#route-file]

There is **no `app/routes/account.tsx`** in your project. The engine registers the layout itself, so you cannot take it over by copying a file. What it does is simple: it reads `page` from the deepest child's loader data and hands it to `CustomerLayout`, with the child inside.

### Shape the frame from a child route [#shape-the-frame-from-a-child-route]

The frame takes its title and breadcrumb from the child's `page` (`{ title, slug }`). To change them, return a new `page` from the loader's `extend` argument:

```tsx title="app/routes/account.profile.tsx"
import { createFileRoute } from '@tanstack/react-router';
import { Profile } from '@salla.sa/twilight-theme-engine/routes/account';
import type { ProfilePageProps } from '@salla.sa/twilight-theme-engine/routes/account';
import { CustomerPageSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/account/profile')({
  loader: ({ params }): Promise<ProfilePageProps> =>
    Profile.loader({ locale: params.locale }, (data) => ({
      page: { ...data.page, title: 'My details' },
    })),
  head: withHead(Profile),
  pendingComponent: () => <CustomerPageSkeleton />,
  component: function ProfileRoute() {
    const data: ProfilePageProps = Route.useLoaderData();
    return <Profile.Component {...data} />;
  },
});
```

## What the layout provides [#what-the-layout-provides]

* The breadcrumb and `<h1>`, from the child's `page`. The profile page also gets the avatar uploader above the menu.
* A `customer` class on `<body>`, so you can scope styles to account pages.
* The user menu sidebar, on large screens only.
* A skeleton while a child loads: `CustomerLayoutSkeleton`, or your own component registered under the key `account:layout-pending`.

## What it loads [#what-it-loads]

Nothing. Each child loads its own data and decides whether a token is needed. The layout does not redirect a signed-out customer and sets no head tags; each child sets its own title and language alternates.

## Edge cases [#edge-cases]

* **`/account` on its own** shows the frame with an empty body and no title. Link to a child page, such as `/account/orders`.
* **Signed out.** Handled per child: each throws `unauthorized()`, which sends a guest to the home page with `?intended_to=`, where the Salla SDK opens the sign-in form. See [Authentication and scope](https://docs.salla.dev/twilight/react/api/authentication-and-scope).

## See also [#see-also]

* [Account profile](https://docs.salla.dev/twilight/react/routes/account-profile), the first child page
* [Fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route) and [Loading data](https://docs.salla.dev/twilight/react/guide/loading-data)
* [Overview](https://docs.salla.dev/twilight/react/routes) of every route