@datalayer/core/lib/navigation/components.js

[](https://datalayer.io)

import { jsx as _jsx } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { forwardRef, useCallback } from 'react';
import { useNavigate } from '../hooks/useNavigate';
/**
 * Navigation link component that works with any routing solution
 */
export const NavigationLink = forwardRef(({ to, children, replace = false, state, onClick, ...props }, ref) => {
    const navigate = useNavigate();
    const handleClick = useCallback((e) => {
        // Allow custom onClick handler
        if (onClick) {
            onClick(e);
        }
        // If not prevented, navigate
        if (!e.defaultPrevented) {
            e.preventDefault();
            navigate(to, e, true, { replace, state });
        }
    }, [to, replace, state, navigate, onClick]);
    return (_jsx("a", { ref: ref, href: to, onClick: handleClick, ...props, children: children }));
});
NavigationLink.displayName = 'NavigationLink';
/**
 * Compatibility export for react-router-dom Link
 * @deprecated Use NavigationLink
 */
export const Link = NavigationLink;
/**
 * Compatibility export for react-router-dom NavLink
 * @deprecated Use NavigationLink with custom styling
 */
export const NavLink = NavigationLink;