useNavigate - Metabind

useNavigate(): (options: { to: string; props?: Record<string, string> }) => void;

Returns

A function that triggers navigation. The host app defines how navigation requests are handled.

options

object

required

Navigation options.

Show options fields

string

required

The navigation destination identifier. This is typically a screen name, route path, or component name defined by the host app.

props

Record<string, string>

Key-value pairs passed to the destination screen as parameters.

Usage

Navigate to a detail screen

const body = (props) => {
    const navigate = useNavigate()

    return Button("View Details", () => {
        navigate({ to: "DetailView", props: { id: props.itemId } })
    })
}

Navigate with multiple parameters

const body = (props) => {
    const navigate = useNavigate()

    return Button("Open Profile", () => {
        navigate({
            to: "ProfileScreen",
            props: {
                userId: props.userId,
                tab: "settings"
            }
        })
    })
}

Notes

useNavigate must be called inside a component body function, not at the top level.
The to value and how navigation is handled depends entirely on the host app’s navigation setup. The BindJS runtime forwards the request to the native navigation handler.
All prop values must be strings.

​Returns

​Usage

​Navigate to a detail screen

​Navigate with multiple parameters

​Notes

​See Also

Returns

Usage

Navigate to a detail screen

Navigate with multiple parameters

Notes

See Also