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

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

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

    return (
        ...
    )
}