Parallel Routes
- Next JS can render multiple pages on the same route and will retain navigation history.
Behaviour is slightly different for hard and soft link navigation
- Soft navigation: Next.js will perform a partial render, changing the subpage within the slot, while maintaining the other slot's active subpages, even if they don't match the current URL.
- Hard Navigation: Next.js cannot determine the active state for the slots that don't match the current URL. Instead, it will render a default.js file for the unmatched slots, or 404 if default.js doesn't exist.
Notes
- Try alternating between soft links on the root page and the sub paths to see how navigation works.
- Hard navigation to /settings will return a 404 for the whole route as slot 2 has no settings path and no default.js
Page.tsx
- This is the top level parent for parallel child slots
- It will render provided all slots can resolve the url
- If one or more slots cannot render, then default.js will render instead
Slot 1 root
Slot 2 root