Callbacks

There are a few navigation callbacks to manage the lifecycle of a navigation:

• onNavigate
• onCanceled
• onNavigateStart
• onActionError
• onAborted
• onNavigateEnd

These callbacks can be used as properties to Link and Form elements to be invoked with navigations from these components.

function Route() {
	let [Link, busy, loading, navigations] = useLink()

	function onNavigate(event) { ... }
	function onCanceled(event) { ... }
	...

	return <Link href="/" onNavigate={onNavigate} onCanceled={onCanceled}>Navigate</Link>
}

function Route() {
	let [Form, busy, loading, navigations] = useForm()

	function onNavigate(event) { ... }
	function onCanceled(event) { ... }
	...

	return <Form action="/" onNavigate={onNavigate} onCanceled={onCanceled}>
		...
	</Form>
}

Or use them as an option to the navigate function when navigating programmatically.

function Route() {
	let [navigate, busy, loading, navigations] = useNavigate()

    useEffect(() => {
    	function onNavigate() { ... }
    	function onCanceled() { ... }

    	setTimeout(() => {
    		navigate("/", { onNavigate, onCanceled })
    	}, 5000)
    }, [])

	...
}

These callbacks can also be added as properties to the Router element to be called for all router navigations.

let Router = Routes(
	<App>
		<Todos path="todos" />
		...
	</App>
)

function Application() {
	function onNavigate(event) { ... }
	function onCanceled(event) { ... }
	...

	return <Router onNavigate={onNavigate} onCanceled={onCanceled} />
}

onNavigate(event)

When a navigation is requested the onNavigate callback is invoked with a navigation event. Use this callback to cancel some or all navigation events by calling preventDefault on the navigation event.

onCanceled(event)

When a navigation event was canceled, either in the onNavigate callback or in an event listener for navigate events, the onCanceled callback will be invoked.

onNavigateStart(event)

When no callback or event handler has prevented the navigation, the onNavigateStart callback will be invoked.

onActionError(event, actionError)

When the action of a POST navigation throws an error, the onActionError callback will be invoked

onAborted(event, reason)

When the navigation was aborted, the onAborted callback will be invoked.

A navigation can be aborted automatically by the router because it is interrupted by another navigation. Or navigations can be aborted manually with the useAbort hook.

onNavigateEnd(event, actionResult)

When the navigation was successful, the onNavigateEnd callback will be invoked.