preact-router
preact-router copied to clipboard
activeClassName doesn't show up on pre-rendered pages
As the title says, links don't have the active class name appended in pre-rendered pages code. When I start to navigate everything works as it should.
Some additional data.
Here's my prerender-urls.js
const defaultMeta = {
title: 'Title',
description: 'Test',
}
module.exports = async () => {
return [
{
url: '/',
...defaultMeta,
},
{
url: '/me',
...defaultMeta,
title: `Me / ${defaultMeta.title}`,
},
{
url: '/experiments',
...defaultMeta,
title: `Experiments / ${defaultMeta.title}`,
},
{
url: '/graphics',
...defaultMeta,
title: `Graphics / ${defaultMeta.title}`,
},
]
}
For a test I wrapped my links with <Match>
<Match path="/">{(props: any) => (
<Fragment>
<span>{JSON.stringify(props)}</span>
<Link href="/experiments" class={`${className}${props.url.startsWith('/experiments') ? ' active' : ''}`} onClick={onClick}>Experiments</Link>
<Link href="/graphics" class={`${className}${props.url.startsWith('/graphics') ? ' active' : ''}`} onClick={onClick}>Graphics</Link>
<Link href="/me" class={`${className}${props.url.startsWith('/me') ? ' active' : ''}`} onClick={onClick}>Me</Link>
</Fragment>
)}</Match>
After building the project I noticed that props
contains data from the previous page.
{ "url": "/", "matches": true } -> "/"
{ "url": "/", "path": "/", "matches": true } -> "/me"
{ "url": "/me", "path": "/me", "matches": false } -> "/experiments"
{ "url": "/experiments", "path": "/experiments", "matches": false } -> "/graphics"