🚀 React Router v6

Answer: React Router v6 mein Switch component ko Routes component ne replace kar diya hai. Yeh change isliye kiya gaya kyunki:

1. Better Naming: "Routes" naam zyada descriptive hai
2. Relative Routing: Routes component relative routing ko better support karta hai
3. Route Ranking: Automatic route ranking system hai jo best match find karta hai
4. Nested Routes: Nested routes ko handle karna zyada easy ho gaya hai

<Switch> (v5) → <Routes> (v6)

Answer: useParams hook URL parameters ko access karne ke liye use hota hai. Jab aap dynamic routes banate ho, tab yeh hook un parameters ko extract karta hai.

Example:
Route: /user/:userId/post/:postId
URL: /user/123/post/456

const { userId, postId } = useParams();
// userId = "123"
// postId = "456"

Use Cases: User profiles, product details, blog posts, etc.

Answer: Protected Routes implement karne ke 3 main approaches hain:

1. Wrapper Component Approach:

<ProtectedRoute><Dashboard /></ProtectedRoute>

✅ Pros: Reusable, clean syntax
❌ Cons: Extra component wrapper

2. Higher Order Component (HOC):

const ProtectedDashboard = withAuth(Dashboard);

✅ Pros: Composition pattern, flexible
❌ Cons: Wrapper hell, debugging difficult

3. Layout Route with Outlet:

<Route element={<AuthLayout />}>
  <Route path="/dashboard" element={<Dashboard />} />
</Route>

✅ Pros: Scalable, multiple routes protect kar sakte ho
❌ Cons: Initial setup thoda complex

Answer: Lazy loading se performance improvement:

Benefits:
1. Reduced Initial Bundle: Starting mein sirf required code load hota hai
2. Faster First Paint: Page jaldi render hota hai
3. Better Caching: Individual chunks cache ho sakte hain
4. On-Demand Loading: User jab route visit kare tabhi load ho

Trade-offs:
1. Loading Delay: First time route visit pe delay ho sakta hai
2. Network Requests: Extra network calls
3. Complexity: Error handling aur loading states manage karne padte hain
4. Suspense Required: Fallback UI provide karna zaroori hai

Best Practice: Heavy components (admin panels, dashboards, editors) ko lazy load karo, frequently used components ko nahi.

Answer:

useParams:
• URL path segments se data extract karta hai
• Route definition mein define hota hai: /user/:id
• Read-only hai
• Example: /user/123 → { id: '123' }

useSearchParams:
• Query strings se data extract karta hai
• URL mein ? ke baad aata hai
• Read aur Write dono kar sakte ho
• Example: /products?sort=price&category=electronics

Use Cases:
• useParams: Resource identification (user ID, product ID)
• useSearchParams: Filtering, sorting, pagination, search queries

Example: /products/123?color=red&size=large
• useParams() → { productId: '123' }
• useSearchParams() → { color: 'red', size: 'large' }

Answer:

Outlet Component:
• Parent route component mein child routes render karne ke liye placeholder hai
• Jaise HTML mein <slot> tag hota hai, waise hi kaam karta hai
• Context pass kar sakta hai child routes ko

function Dashboard() {
  return (
    <div>
      <Sidebar />
      <Outlet /> {/* Child routes yahan render honge */}
    </div>
  );
}

Index Routes:
• Default child route jo parent route ke exact path pe render hota hai
• index prop use karte hain, path nahi

<Route path="/dashboard" element={<Dashboard />}>
  <Route index element={<Overview />} />
  <Route path="settings" element={<Settings />} />
</Route>

• /dashboard → Overview render hoga
• /dashboard/settings → Settings render hoga

Answer: React Router v6 automatic route ranking system use karta hai jo best match find karta hai:

Ranking Priority (High to Low):
1. Static segments: /about
2. Dynamic segments: /:id
3. Splat routes: /*
4. Index routes: index

Example:

<Routes>
  <Route path="/users/new" element={<NewUser />} />
  <Route path="/users/:id" element={<UserProfile />} />
  <Route path="/users/*" element={<UsersLayout />} />
</Routes>

• /users/new → NewUser (static match - highest priority)
• /users/123 → UserProfile (dynamic match)
• /users/anything/else → UsersLayout (splat match)

V5 vs V6:
• V5 mein order matter karta tha (first match wins)
• V6 mein specificity matter karti hai (best match wins)
• V6 mein exact prop ki zaroorat nahi