Q1: What are Route Groups and how do they affect the URL structure?
Concept: Route Groups allow you to organize your route segments and project files into logical groups without affecting the URL path structure.
Syntax: Wrap the folder name in parenthesis, e.g., (marketing) or (shop).
Use Case:
- Organizing code (e.g., separating admin and user routes).
- Opting specific routes into different layouts (e.g.,
(shop)/layout.jsvs(marketing)/layout.js).
Q2: Explain Parallel Routes and their primary use case.
Concept: Parallel Routes allow you to simultaneously or conditionally render one or more pages within the same layout.
Syntax: Defined using "slots" named with the @folder convention.
Example: A dashboard layout can render @team and @analytics slots simultaneously. In layout.js, these are received as props.
export default function Layout({ children, team, analytics }) {
return (
<>
{children}
{team}
{analytics}
)
}Q3: What are Intercepting Routes?
Concept: Intercepting routes allow you to load a route from another part of your application within the current layout. This is useful when you want to display the content of a route without the user switching context.
Syntax: (.)folder (same level), (..)folder (one level up), etc.
Common Pattern: "Instagram-style" modals. When clicking a photo in a feed, it opens in a modal (intercepted). When refreshing the page or sharing the URL, it renders the full photo page.