When link is clicked, default browser event isn't prevented

[triallax]

Explanation:

When clicking a link, the page correctly changes to the matching route. However, immediately after that, I get a new page saying Cannot GET /foo

This issue occurs only when using the a tag instead of Link.

[pimdewit]

This took me forever to debug, glad I'm not going crazy

[triallax]

I created this simple workaround for now. Put this in the component where you use the Router component:

useEffect(() => {
        function callback(event) {
            const target = event.target;
            if (
                target &&
                target.nodeName.toLowerCase() === 'a' &&
                !target.href.startsWith('mailto:')
            ) {
                if (event.stopImmediatePropagation) {
                    event.stopImmediatePropagation();
                }
                if (event.stopPropagation) {
                    event.stopPropagation();
                }
                event.preventDefault();
            }
        }
        window.addEventListener('click', callback);
        return () => {
            window.removeEventListener('click', callback);
        };
    }, []);

I didn't complicate it too much because my website isn't that complex anyways. Any suggestions are appreciated.

[jschill]

I have the same issue. routeTo() returns false, so the event is not prevented.

preact-router/src/index.js

Line 63 in f7dbe6d

function routeTo(url) {

Called from here

preact-router/src/index.js

Line 119 in f7dbe6d

if (routeFromLink(t)) {

[developit]

I just figured out what's causing this. In preact 10, Component.forceUpdate() is no longer synchronous. Unfortunately, preact-router is relying on synchronous updates in order to determine whether a clicked link was handled by any mounted routers. It invokes forceUpdate(), then immediately attempts to inspect a Boolean flag set by render():

preact-router/src/index.js

Lines 177 to 178 in f7dbe6d

	this.forceUpdate();
	return this._didRoute;

[developit]

aaand we have a fix! #342