Svelte新手使用svelte-navigator构建客户端路由时遇TypeError报错

AI 小北

2026-7-25

解决SvelteKit中使用svelte-navigator的SSR编译错误

错误原因

svelte-navigator依赖浏览器环境的API（如window），在SvelteKit的SSR（服务端渲染）编译阶段，这些API不存在，从而触发Cannot read properties of null (reading 'indexOf')错误。

解决方案

方案一：仅在浏览器环境中渲染svelte-navigator组件

修改src/routes/+layout.svelte，利用SvelteKit的browser变量判断运行环境，仅在客户端导入并渲染路由组件：

<script>
    import Header from './Header.svelte';
    import './styles.css';
    import { browser } from '$app/environment';
    
    // 仅在浏览器环境下导入svelte-navigator
    let Router, Route, Link;
    if (browser) {
        ({ Router, Route, Link } = await import("svelte-navigator"));
    }
</script>

{#if browser}
<Router>
    <div class="app">
        <Header />

        <main>
            <Route path="/">
                <h3>Home</h3>
                <p>Home sweet home...</p>
            </Route>
        
            <Route path="about">
                <h3>About</h3>
                <p>That's what it's all about!</p>
            </Route>
        </main>
    </div>
</Router>
{/if}

方案二：改用SvelteKit自带的文件系统路由（推荐）

SvelteKit原生提供了适配SSR的文件系统路由，无需额外依赖，步骤如下：

创建首页文件src/routes/+page.svelte：

<h3>Home</h3>
<p>Home sweet home...</p>

创建关于页面文件src/routes/about/+page.svelte：

<h3>About</h3>
<p>That's what it's all about!</p>

修改Header.svelte使用SvelteKit原生导航组件：

<script>
    import { Link } from '$app/navigation';
</script>
<nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
</nav>

简化src/routes/+layout.svelte：

<script>
    import Header from './Header.svelte';
    import './styles.css';
</script>

<div class="app">
    <Header />
    <main>
        <slot /> <!-- 自动渲染对应路由的页面内容 -->
    </main>
</div>