Problema de roteamento Svelte 5 e page.js com estado externo

Tentei usar page.js para roteamento do lado do cliente em um aplicativo Svelte 5, mas encontrei um fenômeno estranho: quando coloco a lógica de roteamento dentro do App.sveltecomponente, tudo funciona bem:

<!-- App.svelte -->
<script lang="ts">
    import router from "page"
    import Index from "./pages/index.svelte"
    import About from "./pages/about.svelte"
    import NotFound from "./pages/404.svelte"

    let Page = $state(Index)

    router("/", () => Page = Index)
    router("/about", () => Page = About)
    router("*", () => Page = NotFound)

    router.start()
</script>

<Page/>

Entretanto, assim que tento extrair essa lógica para um módulo externo, o roteamento falha e os links para outras páginas não fazem nada:

// router.svelte.ts
import router from "page"
import Index from "../pages/index.svelte"
import About from "../pages/about.svelte"
import NotFound from "../pages/404.svelte"

let page = $state(Index);

export const createRouter = () => {

    const registerRoutes = () => {
        router("/", () => page = Index)
        router("/about", () => page = About)
        router("*", () => page = NotFound)

        router.start()
    }

    return {
        get page() {
            return page
        },
        registerRoutes,
    }
}

Agora, quando chamo esse roteador do meu arquivo App.svelte, a página carrega corretamente inicialmente, mas os links entre as páginas não funcionam mais:

<!-- App.svelte -->
<script lang="ts">
    import {createRouter} from "./router.svelte";
    const router = createRouter()
    router.registerRoutes()
    let Page = router.page
</script>

<Page/>

Imagino que haja apenas um mal-entendido da minha parte sobre a reatividade envolvida, mas talvez alguém possa me indicar a direção certa.