Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link activeClassName not working. #379

Open
Aurailus opened this issue Sep 14, 2020 · 8 comments
Open

Link activeClassName not working. #379

Aurailus opened this issue Sep 14, 2020 · 8 comments

Comments

@Aurailus
Copy link

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
Copy link

Possibly related to #365 ?

@mariosant
Copy link

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

@sirianni
Copy link

Any updates? Same problem here.

@orangecoloured
Copy link

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

@timiles
Copy link

timiles commented Apr 10, 2022

As per this comment: #333 (comment), 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
Copy link

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

@qrhfz
Copy link

qrhfz commented Feb 10, 2023

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

@teodragovic
Copy link

teodragovic commented Jul 3, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants