> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Navigate Between Dashboard Pages

## Article: Navigate Between Dashboard Pages

## Article Link: https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/dashboard-pages/navigate-between-dashboard-pages.md

## Article Content:

# Navigate Between Dashboard Pages

You can connect multiple dashboard pages in your CLI project using the [Dashboard SDK's](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) `navigate()` and `observeState()` methods. A common use case is the master-detail pattern: a list page that displays items and a detail page that shows information about a selected item.

To navigate between dashboard pages:

1. Get the target page's component ID.
1. Navigate from the source page.
1. Retrieve data on the target page.

## Prerequisites

- A Wix CLI project with at least 2 [dashboard page extensions](https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/dashboard-pages/add-dashboard-page-extensions.md).
- The `@wix/dashboard` package installed in your project.

## Step 1 | Get the target page's component ID

Find the target dashboard page's component ID in its `extension.ts` file. This is the `id` field:

```ts
export default extensions.dashboardPage({
  id: '1600e523-f812-497d-9323-46e82ab78bd6',
  title: 'Item Details',
  routePath: 'item-details',
  component: './extensions/dashboard/pages/item-details/item-details.tsx',
});
```

## Step 2 | Navigate from the source page

On the source page, use `dashboard.navigate()` to send the user to the target page. Pass data through the `relativeUrl` parameter:

```tsx
import { dashboard } from '@wix/dashboard';

function ItemList({ items }) {
  const handleItemClick = (itemId: string) => {
    dashboard.navigate({
      pageId: '1600e523-f812-497d-9323-46e82ab78bd6',
      relativeUrl: itemId,
    });
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item._id} onClick={() => handleItemClick(item._id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}
```

## Step 3 | Retrieve data on the target page

On the target page, use `dashboard.observeState()` to read the data passed through the URL. The callback fires when the page initializes and whenever the state updates.

The first parameter (`pageParams`) contains a `location` object with the `pathname` passed via `relativeUrl`:

```tsx
import { useEffect, useState } from 'react';
import { dashboard } from '@wix/dashboard';

function ItemDetails() {
  const [itemId, setItemId] = useState<string | null>(null);

  useEffect(() => {
    dashboard.observeState((pageParams, environmentState) => {
      const id = pageParams.location.pathname.replace('/', '');
      setItemId(id);
    });
  }, []);

  if (!itemId) return <div>Loading...</div>;

  return <div>Showing details for item: {itemId}</div>;
}
```

Use the retrieved ID to fetch and display the item's data from your data source.

## See also

- [Add Dashboard Page Extensions with the Wix CLI](https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/dashboard-pages/add-dashboard-page-extensions.md)
- [Dashboard Page Extension Files and Code](https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md)
- [`navigate()` API reference](https://dev.wix.com/docs/sdk/host-modules/dashboard/navigate.md)
- [`observeState()` API reference](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md)