Svelte客户端路由布局异常：指定路由布局全局生效问题求助

你的问题出在同时使用了两个<Router>组件，每个Router会独立匹配当前URL并渲染对应内容，导致两个布局同时被渲染，所有路由都被应用了重复布局。

正确的路由配置方式 #

合并为单个<Router>，通过嵌套路由为不同路径分配对应布局：

<Router>
  <!-- 认证相关路由使用EmptyLayout -->
  <Route path="/auth">
    <EmptyLayout>
      <Route path="/login" component={Login} />
    </EmptyLayout>
  </Route>

  <!-- 私有路由使用ContainerLayout -->
  <Route path="/">
    <ContainerLayout>
      <PrivateRoute component={AddHouse} path="/house/add" />
      <PrivateRoute component={EditHouse} path="/house/edit/:id" />
      <PrivateRoute component={ViewHouse} path="/house/view/:id" />
      <PrivateRoute component={ListHouse} path="/house/list" />
      <PrivateRoute component={AddLand} path="/land/add" />
      <PrivateRoute component={EditLand} path="/land/edit/:id" />
      <PrivateRoute component={ViewLand} path="/land/view/:id" />
      <PrivateRoute component={ListLand} path="/land/list" />
      <PrivateRoute component={FindLocalPeople} path="/people/find/local" />
      <PrivateRoute component={FindGlobalPeople} path="/people/find/global" />
    </ContainerLayout>
  </Route>

  <!-- 404页面使用EmptyLayout，需放在最后 -->
  <Route path="*">
    <EmptyLayout>
      <NotFound />
    </EmptyLayout>
  </Route>
</Router>

另一种条件渲染布局的方式 #

如果需要更灵活的布局切换，可以通过路由匹配结果判断：

<Router>
  <Route path="*" let:match>
    {#if match.path.startsWith('/auth') || match.path === '*'}
      <EmptyLayout>
        <Route path="/auth/login" component={Login} />
        <Route path="*" component={NotFound} />
      </EmptyLayout>
    {:else}
      <ContainerLayout>
        <PrivateRoute component={AddHouse} path="/house/add" />
        <PrivateRoute component={EditHouse} path="/house/edit/:id" />
        <PrivateRoute component={ViewHouse} path="/house/view/:id" />
        <PrivateRoute component={ListHouse} path="/house/list" />
        <PrivateRoute component={AddLand} path="/land/add" />
        <PrivateRoute component={EditLand} path="/land/edit/:id" />
        <PrivateRoute component={ViewLand} path="/land/view/:id" />
        <PrivateRoute component={ListLand} path="/land/list" />
        <PrivateRoute component={FindLocalPeople} path="/people/find/local" />
        <PrivateRoute component={FindGlobalPeople} path="/people/find/global" />
      </ContainerLayout>
    {/if}
  </Route>
</Router>

关键说明 #

• 只保留一个<Router>组件，避免重复渲染布局
• 嵌套路由需注意路径层级，子路由的路径会继承父路由的前缀
• 404路由(path="*")必须放在所有路由的最后，防止提前匹配

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