આ બે અદ્યતન App Router લક્ષણો છે જે અત્યાધુનિક UI લેઆઉટ્સ માટે છે. તેઓ ફોલ્ડર કન્વેન્શન વાક્યરચના શેર કરે છે.
સમાંતર માર્ગો એક લેઆઉટને બહુવિધ સ્વતંત્ર માર્ગ "સ્લોટ્સ" એક સાથે રેન્ડર કરવાની અનુમતિ આપે છે, દરેક તેનો પોતાનો લોડિંગ/ભૂલ સ્થિતિ સાથે. તમે @name ફોલ્ડર્સ સાથે સ્લોટ્સ વ્યાખ્યાયિત કરો છો:
app/
layout.tsx
@team/page.tsx → a slot
@analytics/page.tsx → another slot
// app/layout.tsx — slots are passed as named props
export default function Layout({
children,
team, // ← @team slot
analytics, // ← @analytics slot
}: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) {
return <><nav /> {children} <aside>{team}{analytics}</aside></>;
}
દરેક સ્લોટ સ્વતંત્ર રીતે નેવિગેટ અને લોડ કરે છે — ડેશબોર્ડ્સ માટે તમામ, જ્યાં પેનલ્સ અલગથી અપડેટ કરવામાં આવે છે, અથવા એક સાથે બે વિભાગો બતાવે છે.
વિવધંશ માર્ગો તમને નેવિગેશન "પકડવા" અને તેને વર્તમાન સંદર્ભમાં (દા.ત. મોડલ) રેન્ડર કરવા દે છે, સંપૂર્ણ પૃષ્ઠની જગ્યાએ — જ્યારે હજુ પણ એક વાસ્તવિક, શેરયોગ્ય URL છે.
app/feed/page.tsx
app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed
app/photo/[id]/page.tsx → the full page (on direct visit / refresh)
Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123
Refresh or share that URL → renders the FULL photo page (no interception)
વિવધંશ માર્કર્સ ((.) સમાન સ્તર, (..) એક ઉપર, (...) મૂળ) નિયંત્રણ કરે છે કે કયો સેગમેન્ટ વિવધંશ છે. આ બરાબર કેવી રીતે Instagram-શૈલીનું "ફોટો મોડલમાં ખુલે છે પરંતુ તેનો પોતાનો URL છે" પેટર્ન કાર્ય કરે છે.
સમાંતર માર્ગો જટિલ, સ્વતંત્ર રીતે-લોડિંગ બહુ-ફલક લેઆઉટ્સ (ડેશબોર્ડ્સ) સાફ કરવા માટે સક્ષમ કરે છે; વિવધંશ માર્ગો "વાસ્તવિક URL સાથે મોડલ" પેટર્ન (શેરયોગ્ય, તાજું-સુરક્ષિત, બેક-બટન-અનુકૂળ) આપે છે જે અન્યથા બાંધવો મુશ્કેલ છે.
તેઓ અદ્યતન છે, પરંતુ તેઓ વાસ્તવિક UX સમસ્યાઓ હલ કરે છે — સ્વતંત્ર પેનલ્સ અને સંદર્ભાત્મક ઓવરલે — જે અગાઉ નોંધપાત્ર જાતીય રૂટિંગ/સ્થિતિ કાર્ય જરૂરી હતો.