search

preactjs / preact-router

:earth_americas: URL router for Preact.
http://npm.im/preact-router
MIT License
1.01k stars 156 forks source link

Link activeClassName not working. #379

Open Aurailus opened 3 years ago

Aurailus commented 3 years ago

Hi, I'm trying to use ActiveClassName to style my links, but the property is not being processed, and is instead being passed down to the native DOM. Here's my code: 

                    <nav class="AppHeader-nav">
                        <Link activeClassName="active" href="/admin/home">Home</Link>
                        <Link activeClassName="active" href="/admin/pages">Pages</Link>
                        <Link activeClassName="active" href="/admin/media">Media</Link>
                        <Link activeClassName="active" href="/admin/themes">Themes</Link>
                        <Link activeClassName="active" href="/admin/plugins">Plugins</Link>
                    </nav>

And the resultant HTML:

<nav class="AppHeader-nav"><a activeclassname="active" href="/admin/home">Home</a><a activeclassname="active" href="/admin/pages">Pages</a><a activeclassname="active" href="/admin/media">Media</a><a activeclassname="active" href="/admin/themes">Themes</a><a activeclassname="active" href="/admin/plugins">Plugins</a></nav>

I as on /admin/home when I copied the above HTML. Please let me know if you need any more information.

levidurfee commented 3 years ago

Possibly related to #365 ?

mariosant commented 3 years ago

Any updates on that? I have the very same issue.

sirianni commented 2 years ago

Any updates? Same problem here.

orangecoloured commented 2 years ago

I see the same behaviour. Link from match does not have activeClassName applied when on href route.

timiles commented 2 years ago

As per this comment: https://github.com/preactjs/preact-router/issues/333#issuecomment-543839970, this is fixed for me if I use import { Link } from 'preact-router/match'; rather than import { Link } from 'preact-router'; (preact-router v3.2.1)

orangecoloured commented 2 years ago

The active class with Link from match doesn't work for SSR pages.

qrhfz commented 1 year ago

<Link> from preact-router/src/index.js should just reexport from preact-router/match/src/index.js

teodragovic commented 1 year ago

There is indeed bug with matching <Link> and activeClassName when className is present

import { Link } from 'preact-router/match';

<Link activeClassName="is-active" class="c-header-link" href="/foo">Foo</Link> // works

<Link activeClassName="is-active" className="c-header-link" href="/foo">Foo</Link> // does not work

Tested with preact@10.15.1 and preact-router@4.1.1