# usePatternsNavigate

**Category:** Base Components/Pages/Router/Hooks/usePatternsNavigate

## Design

### Description

The `usePatternsNavigate` hook provides functions to navigate between pages in a Patterns React application.


### Usage
This hook returns an object with two functions that you can use:

```ts
const { navigateToCollectionPage, navigateToEntityPage } = usePatternsNavigate();
```

The `navigateToCollectionPage` function is used to navigate to a collection page. \
A good usecase for it, is to navigate to a collection page on a breadcrumb click on an entity page. \
It takes the path of the collection page as an argument:

```ts
   {
      if (e.id === 'root') {
        navigateToCollectionPage({ path: '/entities' });
      }
    }}
  />
```

The `navigateToEntityPage` function is used to navigate to an entity page. \
The advantage of using this function is that the header of the entity page, that may contain title, subtitle and breadcrumbs, is being shown right away, without waiting to the fetch of the entity. \
A good usecase for it, is to navigate to an entity page on an action cell click on a collection page. \
It takes the path of the entity page, and the entity as arguments:

```ts
   actionCell={(item) => {
      return {
        primaryAction: {
          text: 'Edit',
          onClick: () =>
            navigateToEntityPage({
              path: `/entities/${item.id}`,
              entity: item,
            }),
          icon: ,
        }
      }
   }}
```


```tsx
import { usePatternsNavigate } from '@wix/patterns/router';
```