SvelteKit跳转新页面时新内容叠加在旧页面上的问题如何排查？

• 检查该页面代码内是否存在原生DOM操作：比如通过document.createElement+appendChild之类的API手动向页面插入元素，这部分手动插入的DOM不受Svelte的卸载逻辑管控，路由切换时不会被自动清除，会残留到新页面上形成内容叠加。
• 检查该页面对应的+page.js/+page.ts配置：是否单独设置了export const csr = false关闭了客户端渲染，这种情况下路由跳转时不会走客户端水合替换逻辑，只会把服务端返回的新页面内容直接拼接在现有DOM上。
• 检查该页面是否存在未捕获的运行时报错：路由切换时如果页面内的JS执行报错，会打断SvelteKit的路由卸载、新页面挂载的流程，导致旧页面未完全卸载就插入新页面内容。可以打开浏览器开发者工具的控制台，触发路由跳转查看是否有错误抛出。
• 检查该页面的自定义+layout.svelte：如果该页面单独使用了层级布局，确认布局内是否正确放置了<slot />插槽，是否存在插槽相关的条件判断逻辑错误，导致旧插槽内容未被替换就新增了新的插槽内容。
• 检查该页面是否自定义了路由钩子：比如onNavigate钩子内错误调用了event.preventDefault()阻止了默认路由切换逻辑，或者钩子内的异步逻辑未正常执行完成，导致旧页面未卸载就加载了新内容。

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