easy-page-router/react.js

easy-page-router is a lightweight and easy-to-use JavaScript routing package that simplifies navigation in vanilla JavaScript, React, and React Native applications.

import React, { useEffect, useMemo } from "react";
import { useRouter } from ".";
export * from ".";
export function Link({ href, className = "", children, onClick }) {
    const { push, href: pageHref } = useRouter();
    const isActive = useMemo(() => {
        const url = new URL(pageHref);
        return url.pathname + url.search === href;
    }, [href, pageHref]);
    return React.createElement("a", { href: href, className: className + (isActive ? " active" : ""), onClick: (e) => {
            e.preventDefault();
            onClick?.(e);
            push(href);
        } }, children);
}
export function useTitle(title) {
    const { state } = useRouter();
    useEffect(() => {
        if (state === "active") {
            document.title = title;
        }
    }, [state, title]);
}