active Link styling

[OhFlohre]

Is there a way to use the active css selector on the Link component? I know react router handles this with the NavLink component. Is there an equivalent in wouter?

[cbbfcd]

no equivalent in wouter, you can custom your NavLink.

[angelxmoreno]

I use react-bootstrap with wouter and below is my custom NavLink:

import React, { FC } from 'react';
import classNames from 'classnames';
import { Link, LinkProps, useRoute } from 'wouter';

const AppNavLink: FC<LinkProps> = ({ children, ...props }) => {
    const href = props.href || '';
    const [isActive] = useRoute(href);
    const anchorClasses = classNames('nav-link', { active: isActive });
    return (
        <li className="nav-item">
            <Link {...props}>
                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                <a className={anchorClasses}>{children}</a>
            </Link>
        </li>
    );
};

export default AppNavLink;

usage:

<AppNavLink href={'/channels'}>Channels</AppNavLink>

[molefrog]

Yep, thanks everything for helping to resolve this. We have a tiny snippet in the README that covers that https://github.com/molefrog/wouter#how-do-i-make-a-link-active-for-the-current-route, so I'm going to close this issue.