Routing in Framer programmatically

Nov 13, 2023

The useRouter hook is a powerful hook in Framer that allows you to programmatically change routes inside Client Components.

Below is the override code that you can use to change routes:

const PATH = "/page"

Change the path value to your desired path.

import {useRouter} from "framer"

function getRouteId(allRoute, path) {
    for (const [key, value] of Object.entries(allRoute)) {
        if (value?.path === path) {
            return key
        }
    }
    return ""
}


// provide the path here

const PATH = "/page"
export function withNavigation(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        const { navigate, routes } = useRouter()

        const handleClick = (e) => {
            e.preventDefault()
            const allRoute = routes
            let routeId = getRouteId(allRoute, PATH)
            if (routeId === "") {
                routeId = getRouteId(allRoute, "/")
            }
            navigate(routeId, "")
        }

        return <Component {...props} onClick={handleClick} />
    }
}