Components with links use simple
<a> tags. In order to replace the default link behavior with custom ones (e.g. react-router),
onNavigation provides an interface to pass external logic into the 'onClick' event handler in children links.
This example illustrates a custom navigation implementations to externally control the link functionality of Link: setting a default navigation logic with OnLinkNavigationProvider.
onNavigation prop is passed to OnLinkNavigationProvider, it's passed down to all children links and sets a customized default link navigation behavior.
onNavigation is a higher-order function: it takes named arguments:
target and returns an event handler function. In the component's
onClick event handler, the
onClick prop gets called first, followed by the function passed down by the OnLinkNavigationProvider.
onNavigation is a hook function, it can contain complex logic, including React hooks, to perform side effects.
In this example, the
useOnNavigation hook function is passed to OnLinkNavigationProvider and executes the following actions:
- Disable the default link behavior
- Show an alert message
- Open a different URL in a new window
Link / Button / IconButton / TapArea / DropDown / Callout / Upsell / ActivationCard
If these components are under a OnLinkNavigationProvider, their link behavior defaults to the logic defined in OnLinkNavigationProvider. In order to disable the onNavigation logic, we can return "dangerouslyDisableOnNavigation" in the
onClick callback. See each component page for more information.