Multiple active elements post scaffold?

[swar-mukh]

Describe the issue

Create a starter project, build it with SSR enabled. The scaffold contains a sample <Header /> component with multiple nav links.

In dev mode, when you initially load a route, or you navigate to another route from nav links or you just hit enter in the URL bar: in all 3 cases the active route is highlighted correctly.

If you build and preview it, then:

1. If you load an SSR route from URL and hit enter e.g. localhost:4173/about/, the correct nav link is highlighted. Continuing on clicking on other links, correct active routes are also highlighted. Also, if you create a route as say /profile (not absence of forward-slash), it'll continue to correctly highlight the active route
2. If you however load a non-SSR route from URL and hit enter e.g. localhost:4173/about (note the absence of a forward-slash), then only the link associated with the root path i.e. / or Home is highlighted. Continuing to click on any other route except Home preserves Home highlighted while also marking the other routes as active, i.e. at any point in time 2 routes are active, which is incorrect. Only after when you click on Home i.e. root route /, and then click on other routes, you get the actual behaviour of only one active route being highlighted.

Steps

1. Run yarn create preact and create a project (ensure you use ssr)
2. Run yarn build && yarn preview
3. Follow the bug as highlighted in the description above

Expectation

Irrespective of SSR or non-SSR, only one route should be active and be highlighted. If you log the url and path attributes from useLocation, it correctly emits the current URL address. I presume it has something to do with rendering not picking up the correct path. But that too is contradictory since I have correctly used useEffect on path as dependency to update the document title.

[rschristian]

This is a bug in Vite's preview mode, it only ever serves /index.html (the preredered home page). It will not serve any other HTML doc by default.

You'll need to write a plugin if you want the preview server to act correctly, unfortunately.

Here's what we use for the Preact website

The two active links at once is therefore a hydration error that comes from this mismatch (using the wrong HTML doc for the path).

[swar-mukh]

I see. Thanks for the information.

[rschristian]

We'll land something in @preact/preset-vite to address this shortly, so users don't have to write their own plugins to work around Vite's (rather odd) choice to change routing.

[rschristian]

@preact/[email protected] provides a middleware to correct this. You'll have to set the previewMiddlewareEnabled option in the plugin config to true and you should be good to go.

Option Docs