preact-router icon indicating copy to clipboard operation
preact-router copied to clipboard

activeClassName doesn't show up on pre-rendered pages

Open orangecoloured opened this issue 3 years ago • 1 comments

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 avatar Jan 26 '22 14:01 orangecoloured

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"

orangecoloured avatar Jan 27 '22 16:01 orangecoloured