如何为Svelte-Navigator设置默认路由实现未定义路由重定向？

公共组件在未匹配路由时仍渲染的核心原因：这类组件被放在了路由匹配逻辑的控制范围外（比如直接写在<Router>根节点下、所有<Route>组件的外部），组件渲染不受路由匹配结果影响，无论访问什么路径都会正常加载。

配置步骤 #

• 调整公共组件的渲染位置
  不要把头部、侧边栏这类全局公共组件直接放在路由容器外层，改用svelte-navigator提供的<Layout>布局路由承载公共组件，让公共组件的渲染纳入路由匹配控制范围。
• 配置通配符兜底路由
  在所有业务路由的最后添加path="*"的通配符路由，匹配所有未被前置规则命中的路径，结合<Redirect>组件实现自动跳转。基础代码示例：

  <script>
    import { Router, Route, Layout, Redirect } from 'svelte-navigator'
    // 引入公共组件
    import AppHeader from './components/AppHeader.svelte'
    import AppSidebar from './components/AppSidebar.svelte'
    // 引入业务页面
    import HomePage from './pages/Home.svelte'
    import UserPage from './pages/User.svelte'
    import DashboardPage from './pages/Dashboard.svelte'
  </script>
  
  <Router>
    <Layout path="/">
      <!-- 公共组件放在布局路由内，仅匹配合法路由时渲染 -->
      <AppHeader />
      <div class="app-wrapper">
        <AppSidebar />
        <main class="page-content">
          <!-- 业务路由按优先级从上到下排列 -->
          <Route path="/" element={<HomePage />} />
          <Route path="/user" element={<UserPage />} />
          <Route path="/dashboard" element={<DashboardPage />} />
          <!-- 兜底通配符路由，必须放在所有同层级路由最后 -->
          <Route path="*" element={<Redirect to="/" replace />} />
        </main>
      </div>
    </Layout>
  </Router>
  

• 自定义跳转逻辑（可选）
  如果需要在跳转前加访问日志上报、错误提示这类逻辑，可以把通配符路由的渲染元素换成自定义组件，在组件内调用路由跳转方法：

  <!-- 路由配置项 -->
  <Route path="*" element={<RouteFallback />} />
  
  <!-- RouteFallback.svelte 组件代码 -->
  <script>
    import { onMount } from 'svelte'
    import { useNavigate } from 'svelte-navigator'
    const navigate = useNavigate()
  
    onMount(() => {
      // 自定义逻辑：比如打印错误访问记录、弹全局提示
      console.warn('访问路径不存在，已自动跳转到首页')
      // replace: true 表示替换当前历史记录，避免返回键回到不存在的路径
      navigate('/', { replace: true })
    })
  </script>
  

注意事项 #

• 通配符路由*的匹配优先级最低，必须放在所有同层级路由的末尾，否则会拦截正常的路由请求。
• 跳转时建议加replace: true参数，替换当前浏览历史记录，避免用户点浏览器返回按钮时反复在不存在的路径和首页之间跳转。
• 所有需要受路由控制渲染的组件，都必须放在对应层级的路由容器内部，放在路由外层的组件会全局常驻，不受匹配规则影响。

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