Proposal: Enhance Solid Router with Better Active Link Handling

[r-Larch]

Introduction

In real-world applications, navigation menus often need to handle complex highlighting logic to indicate the currently active link. Solid Router provides the <A> component with an activeClass option and built-in logic to apply the active class. However, the current functionality has limitations when managing nested routes and ensuring that only one link is highlighted at a time.

This discussion aims to address these limitations by proposing enhancements to Solid Router or exporting useful primitives that simplify custom implementations for advanced use cases.

---

The Problem

A common use case involves a navigation menu like this:

<nav>
 <A activeClass="bg-blue-50" href="/">Home</A>
 <A activeClass="bg-blue-50" href="/profile">Profile</A>
 <A activeClass="bg-blue-50" href="/profile/subscriptions">Subscriptions</A>
</nav>

With routes defined as follows:

<Route path="/profile" component={...}>
  <Route path="/" component={...} />
  <Route path="/security" component={...} />
  <Route path="/subscriptions" component={...}>
    <Route path="/" component={...} />
    <Route path="/invoices" component={...} />
  </Route>
</Route>

Navigating to /profile/subscriptions results in both 'Profile' and 'Subscriptions' being highlighted. Adding end={true} to the 'Profile' link solves this for /profile, but causes other issues, such as no link being highlighted for /profile/security or /profile/subscriptions/invoices.

The desired behavior is to always highlight exactly one link, as shown in this table:

location.pathname	Highlighted Link
/	Home
/profile	Profile
/profile/security	Profile
/profile/subscriptions	Subscriptions
/profile/subscriptions/invoices	Subscriptions

---

Existing Workaround

To achieve this behavior, I examined the source code of Solid Router's <A> component, particularly the isActive accessor, and created a custom hook:

solid-router/src/components.tsx

Lines 50 to 56 in 50c5d7b

	const isActive = createMemo(() => {
	const to_ = to();
	if (to_ === undefined) return [false, false];
	const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
	const loc = decodeURI(normalizePath(location.pathname).toLowerCase());
	return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
	});

Building on this, I implemented a custom hook, createMatchSelector, to determine the best-matching link. However, this approach requires accessing Solid Router internals like normalizePath and duplicating parts of the isActive logic, which feels brittle and error-prone.

Here is the implementation of the hook:

type NavLink = {
    href: string;
    end?: boolean; // true: exact match; false: prefix match.
};

/**
 * Creates a selector to match the single best-matching link from the provided `links` collection.
 * Useful for rendering a navigation menu where only one link is marked as active.
 * @param links A list of links to determine the best match.
 * @returns A selector that returns `true` for the best-matching link in the `links` collection.
 */
function createMatchSelector(links: Accessor<NavLink[]>): (key: string | undefined) => boolean {
    const bestMatch = selectBestMatch(links);

    const active = createSelector<NavLink | undefined, string | undefined>(
        bestMatch,
        (a, b) => !!a && !!b && a === b?.href
    );

    return active;
}

/**
 * Selects the single best-matching link from the provided `links` collection as a cached computation.
 * @param links A collection of links.
 * @param location The URL pathname to match against. Defaults to `location.pathname`.
 * @returns The best-matching NavLink or undefined if no match is found.
 */
export function selectBestMatch(links: Accessor<NavLink[]>, location?: Accessor<string>): Accessor<NavLink | undefined> {
    const _location = useLocation();
    return createMemo(() => {
        const matcher = createPathMatcher(location ?? (() => _location.pathname));
        // Select the best match by choosing the longest link from all matching links.
        const match = links()
            .filter(matcher)
            .sort((a, b) => (a.href.length > b.href.length ? -1 : 1))[0];
        return match;
    });
}

/**
 * Creates a matcher function to determine if a given `NavLink` matches the current `pathname`.
 * @param pathname The URL pathname to match against.
 * @returns A matcher function that returns true if the provided NavLink matches the current `pathname`.
 */
export function createPathMatcher(pathname: Accessor<string>) {
    const loc = decodeURI(/*normalizePath*/(pathname()).toLowerCase());
    return (link: NavLink) => {
        // Logic originated from `isActive` in <A> component:
        const to = link.href;
        if (to === undefined) return false;
        const path = /*normalizePath*/(to.split(/[?#]/, 1)[0]).toLowerCase();
        return link.end
            ? path === loc
            : loc.startsWith(path + "/") || loc === path;
    };
}

Usage Example

The createMatchSelector hook can be used in a component like this to manage a tabbed navigation menu with consistent highlighting for the active link:

type TabNavProps = {
    links: Link[];
    size?: 'sm' | 'lg';
    class?: string;
};

export type Link = {
    name: string;
    href: string;
    end?: boolean;
};

export function TabNavView(props: TabNavProps) {
    const style = tabviewStyle(() => props.size ?? 'lg')
    const active = createMatchSelector(() => props.links)
    return (
        <nav class={classes(style().container, props.class)}>
            <For each={props.links}>{link =>
                <A
                    href={link.href}
                    end={link.end}
                    class={classes(
                        style().button,
                        active(link.href)
                            ? style().theme.button.active
                            : style().theme.button.normal
                    )}
                    activeClass=""
                >
                    {link.name}
                </A>
            }</For>
        </nav>
    )
}

This example demonstrates how to apply the createMatchSelector hook to consistently highlight a single active link in a navigation menu.

---

Proposed Solutions

1. Add createMatchSelector to Solid Router
   This would make it straightforward to implement navigation menus with consistent single-link highlighting logic.

2. Export Useful Primitives
   Refactoring <A> component and exporting utilities like selectBestMatch and createPathMatcher would enable developers to build such custom hooks more robustly.

---

Conclusion

Solid Router is a fantastic tool, and extending its capabilities with these enhancements would address common navigation challenges while maintaining flexibility for developers.

I'm open to feedback, suggestions, and alternative approaches to solve this issue more elegantly. Let me know your thoughts! 😊