preactjs / preact-router

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

activeClassName doesn't show up on pre-rendered pages #418

Open orangecoloured opened 2 years ago

orangecoloured commented 2 years ago

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.

orangecoloured commented 2 years ago

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"