Skip to content

2.0: Nested route layouts remount on every navigation between their children #588

Description

@cradle-song

Describe the bug

A shared parent layout is torn down and re-created on every navigation between its child routes, even though its route stays in the match chain and the router correctly reuses its route context. This contradicts the documented behavior:

Solid Router reuses a matched route context while its route definition remains in the next match chain. Moving between sibling child routes therefore keeps their shared parent layout mounted.

The bug affects any nested routes -- path-ful and pathless layouts alike. Only navigations that change no level of the match chain (same leaf route, different params) are unaffected.

Fallout: everything that lives in a layout is destroyed per click -- component state resets, onCleanup fires, providers are re-created, and CSS transitions never play.

Your Example Website or App

https://github.com/cradle-song/repro-solid-router-remount

Steps to Reproduce the Bug or Issue

  1. Open the app (with the browser console visible)
  2. Click Page A
  3. Click Page B

Expected behavior

The page shows Layout instance #1. One Layout mount #1 console log at startup, new clicks do not log anything.

Screenshots or Videos

The page shows Layout instance #N. Every click logs new Layout mount #N

Platform

  • Version: 2.0.0-next.17

Additional context

Suggested fix in repo README.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions