- New to svelte/sveltekit. I am trying to make a master detail layout work (side by side on desktop and separate pages on mobile)
- When testing shallow routing on the desktop, I click on items one after the other and the url changes and these changes are being picked by details
- As soon as I reload the page with one of the items selected, something breaks
- Now I click on items and only the URL is changing but the changes are not being picked
- Super appreciate if someone can shed some light on this
routes/(news)/[[news=newsMatcher]]/+layout.svelte
<script lang="ts"> import '$lib/css/app.css'; import { page } from '$app/state'; import { MediaQuery } from 'svelte/reactivity'; import NewsListContainer from '$lib/components/NewsListContainer.svelte'; const { data, children } = $props(); const large = new MediaQuery('min-width: 768px'); const hasNoDetailSelected = $derived.by(() => { return ( typeof page.state.id === 'undefined'&& typeof page.state.title === 'undefined'&& typeof page.params.id === 'undefined'&& typeof page.params.title === 'undefined' ); });</script><header class="header"><h1><a data-sveltekit-preload-data="off" href="/">TestNewsApp</a></h1></header>{#if large.current}<main><div class="news-list-container"><NewsListContainer items={data.newsItems} /></div><div class="news-detail-container"> {@render children()}</div></main>{:else if !large.current && hasNoDetailSelected}<div class="news-list-container"><NewsListContainer items={data.newsItems} /></div>{:else}<div class="news-detail-container"> {@render children()}</div>{/if}<style> .news-detail-container { background-color: lightyellow; display: flex; flex: 1; flex-direction: column; overflow: hidden; } .news-list-container { background-color: lightcyan; display: flex; flex: 1; flex-direction: column; overflow: hidden; } main { background-color: lightgreen; display: flex; flex: 1; overflow: hidden; }</style>routes/(news)/[[news=newsMatcher]]/+page.svelte
<script lang="ts"> import { page } from '$app/state'; import NewsDetailContainer from './[id=idMatcher]/[title]/+page.svelte'; const { data } = $props();</script>{#if page.state.id && page.state.title}<NewsDetailContainer {data} id={page.state.id} title={page.state.title} />{:else}<p>Popular News</p>{/if}routes/(news)/[[news=newsMatcher]]/[id=idMatcher]/[title]/+page.svelte
<script lang="ts"> import type { PageProps } from '../../$types'; import { page } from '$app/state'; type Props = PageProps & { id: string; title: string }; const { id, title }: Props = $props();</script><span>{id ? 'Loaded id from shallow routing' : 'Loaded id from actual routing'}</span><span>{title ? 'Loaded title from shallow routing' : 'Loaded title from actual routing'}</span><p>Detail Page What? {id || page.params.id} {title || page.params.title}</p>Here is a sandbox demonstrating the issue
Questions
- How do I prevent the shallow routing from breaking on SSR reload?