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

Default.tsx

• If present, this file will render when a slot cannot resolve the url path.
• If not present, Next will return a 404 for the entire route.
• default.js improves user feedback and helps to organise sub-routes

Explanation

• Slot 1 will render default.js.
• Slot 2 will return a 404 error

Slot 1 default

Slot 2 configure