Links of the form <Link href="path" /> rather than <Link href="/path" /> that are missing the leading slash are routed but trigger a page reload. It's an easy mistake to make since the routing occurs as expected and a difficult problem to diagnose.
Possible solutions:
Don't allow routes missing the leading slash
Don't trigger the reload
Mention it in the readme
Example:
import Router, { Link } from "preact-router";
import { VNode, render } from "preact";
const Home = (): VNode => (
<>
<Link href="/about">/about</Link>
<br />
<Link href="about">about (matches but reloads)</Link>
</>
);
const About = (): VNode => <Link href="/home">/home</Link>
render(
<Router>
<Home default path="/" />
<About path="/about" />
</Router>,
document.getElementById("root") as HTMLDivElement
);
Links of the form
<Link href="path" />
rather than<Link href="/path" />
that are missing the leading slash are routed but trigger a page reload. It's an easy mistake to make since the routing occurs as expected and a difficult problem to diagnose.Possible solutions:
Example: