> ## Documentation Index
> Fetch the complete documentation index at: https://docs.withclasp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Page Navigation

> Learn to customize Clasp's navigation

Internal navigation in the Clasp component can be handled in a few ways. Depending on where and what parts of the Component you want to surface to your users, this guide will walk you through how to achieve them.

## 1) Query Parameter

The benefit of using a query param is that it leverages the browser history allowing native navigation

## 2) State Based

You can also treat the clasp-components as a controlled component by passing a `claspState` variable and an `onChangeState` function to listen for page state changes.

It's best to opt for the Query Parameter option to leverage the browser's native navigation system.

# External Clasp Navigation

There's a few parts within the enrollment flow where clasp passes control of navigation back to the client

It can be done in two ways

## 1) String

you can pass a string to easily navigate back to the desired page

```tsx theme={null}
export const BenefitsPage = () => {
    const navigate = useNavigate();
    const clasp_config: ClaspConfig = {
        ...
        links: {
            home: "/"
        }
    }

    return (
        ...
    )
}
```

## 2) Function

You can pass a function that can integrate with your routing system

The benefit of passing a function instead of a string is to preserve the SPA feeling

The following example uses react-router

```tsx theme={null}
export const BenefitsPage = () => {
    const navigate = useNavigate();
    const clasp_config: ClaspConfig = {
        ...
        links: {
            home: () => { 
                navigate("/")
            }
        }
    }

    return (
        ...
    )
}

```