react-router-v6

Set up react-router-dom v6 routing by initializing createBrowserRouter with your route definitions and passing it to RouterProvider. This data router API replaces declarative routing patterns and enables advanced features like loaders, actions, and errorElement for robust navigation handling.

Declarative routing in react-router-dom v6 uses traditional component hierarchy with BrowserRouter, while data routers use createBrowserRouter and RouterProvider to enable built-in data fetching, mutations via loaders and actions, and automatic error handling through errorElement boundaries.

Migrate react-router-dom from v6 to v7 by first pinning your project to v6.28.x, then consulting the built-in v6-to-v7 migration notes to verify compatibility, update deprecated APIs, and adapt your routing structure to the new framework standards.

HashRouter in react-router-dom v6 operates within the declarative API paradigm. For data fetching features like loaders and actions, you must transition to createBrowserRouter or createHashRouter to properly utilize the RouterProvider data router pattern.

In react-router-dom v6, useNavigate and useParams return undefined when the component rendering them is not placed inside a Router context or lacks a matching dynamic route segment. Ensure your components are nested within Outlet and properly configured RouterProvider structures.