React Router v6: Deep Dive into Modern Routing

What's New in v6

React Router v6 introduced a completely new data API: loaders, actions, and error boundaries. Routes become self-contained with data fetching and mutations.

Basic Setup

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const router = createBrowserRouter([
{
path: ‘/’,
element: <Root />,
loader: rootLoader,
children: [
{ index: true, element: <Home /> },
{ path: ‘contact/:id’, element: <Contact />, loader: contactLoader },
],
},
]);
function App() { return <RouterProvider router={router} />; }

Loaders and Actions

// loader runs before rendering
export async function contactLoader({ params }) {
const contact = await fetchContact(params.id);
return { contact };
}

// action handles form submissions
export async function action({ request, params }) {
const formData = await request.formData();
await updateContact(params.id, formData);
return redirect(/contact/${params.id});
}

Performance Tips

• Use lazy loading for route components: lazy: () => import(‘./routes/Contact’)
• Implement route-level code splitting with React.lazy
• Avoid nesting too deep – max 3-4 levels for maintainability

Common Mistakes

• Forgetting to use <Outlet /> for nested routes
• Not handling loader errors – use errorElement
• Mutating data without actions – leads to stale UI

Interview Q&A

Q: Difference between useNavigate and <Link>? Link is declarative for navigation, useNavigate is imperative (after async operations).
Q: How does React Router handle code splitting? Use lazy property in route object with React.lazy.

Conclusion

React Router v6 is the most powerful routing library for React. Master loaders/actions for data-driven apps.