Svelte Routing路由异常：首次点击报Cannot read properties of undefined (reading 'before')

问题现象 #

首次点击路由链接时控制台抛出错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'before')

    in Route.svelte
    in Router.svelte
    in App.svelte

    at HelloWorld (HelloWorld.svelte:25:4)

首次点击对应页面无法正常渲染，第二次点击则能显示目标页面。

代码示例（App.svelte） #

<script>
  import ToDo from './component/ToDo.svelte';
  import ExerciseType from './component/ExerciseType.svelte';
  import HelloWorld from './pages/HelloWorld.svelte';
  import { Router, Route, Link } from "svelte-routing";
  import { Navbar, NavbarBrand, Button } from '@sveltestrap/sveltestrap';
  import { onMount } from 'svelte';
  export let url = "";
</script>

<main>
  <!-- Navigation Bar -->

<h2 class="text-center">Testing my Nav Links</h2>
<br>
<Router url="{url}">
  <nav class="nav nav-tabs justify-content-center">
    <Link to="/todo" class="nav-link" getProps={({ isCurrent }) => isCurrent ? { class: 'nav-link active bg-primary text-white' } : null}>To-Do</Link>
    <Link to="/exercise-type" class="nav-link" getProps={({ isCurrent }) => isCurrent ? { class: 'nav-link active' } : null}>Exercise Types</Link>
    <Link to="/hello-world" class="nav-link" getProps={({ isCurrent }) => isCurrent ? { class: 'nav-link active' } : null}>Hello World</Link>
  </nav> 
  <!-- Page Content -->
  <div class="container mt-5 text-center">
    <Route path="/todo" component={ToDo}  key="todo"/>
    <Route path="/exercise-type" component={ExerciseType}  key="exercise-type"/>
    <Route path="/hello-world" component={HelloWorld}  key="hello-world"/>
  </div>
</Router>
</main>

问题原因 #

错误栈指向HelloWorld.svelte第25行，说明该行代码在组件挂载到DOM之前，就尝试访问某个DOM元素的before属性（比如调用element.before()方法），但此时该DOM元素还未完成初始化，处于undefined状态。首次路由切换时组件刚初始化，DOM未就绪，触发错误；第二次切换时组件可能已缓存或DOM已完成初始化，因此能正常执行。

解决方案 #

1. 将DOM操作逻辑移至onMount钩子：Svelte的onMount会在组件完全挂载到DOM后执行，此时可以安全访问DOM元素。修改HelloWorld.svelte中的代码：

   <script>
     import { onMount } from 'svelte';
     let targetElement;
   
     onMount(() => {
       // 原第25行的DOM操作代码移至此处
       if (targetElement) {
         targetElement.before(/* 你的目标内容 */);
       }
     });
   </script>
   
   <div bind:this={targetElement}>...</div>
   

2. 检查bind:this的使用：确保通过bind:this绑定的DOM元素在访问前已存在，避免在组件初始化阶段直接调用其方法。

内容的提问来源于stack exchange，提问作者Bill