Skip to main content

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.

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 (
        ...
    )
}