solidjs / solidjs/solid-router
Feature request: persist route (don't unmount when navigate out)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 180
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 19
Description
Describe the bug
Not a bug, but no templates for feature requests.
I want to be able to avoid rerendering a previously visited route and the route should keep all the internal state.
"persist?: boolean" prop would be nice
Syntax proposal:
<Routes><Route path="/" persist element={...} /> </Routes>
The way I accomplish it right now:
<Routes>
<Route path="/" element={<Home />} />
<Route path="/stack" />
...
</Routes>
<PersistRoute path="/stack" component={StackTest} />
export const PersistRoute = (p: { path: string; component: FC }) => {
const match = useMatch(() => p.path)
let dispose: () => void | undefined
const render = once(() => {
return createRoot(_dispose => {
dispose = _dispose
return <p.component />
})
})
onCleanup(() => dispose?.())
return <Show when={match()}>{render()}</Show>
}
Your Example Website or App
https://github.com/solidjs/solid-router
Steps to Reproduce the Bug or Issue
None
Expected behavior
When has "persist" prop it should mount the component on first visit and not cleanup on navigate out
Screenshots or Videos
No response
Platform
all
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing how and mount and clean up elements, then compare that lifecycle with the PersistRoute example in the issue. Determine how a persist prop should behave across navigation, including first visit and later revisits, and add coverage for the expected lifecycle before considering the feature done.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100