Mount the application router
Application bootstrap
TanStack · Component
RouterProvider
RouterProvider mounts a configured TanStack Router in a React application. Pass the router instance through its router prop, usually at the application root.
How it works
RouterProvider is the React component that mounts a configured TanStack Router into the component tree. Pass the router instance created with createRouter through the router prop, typically rendering the provider as the application root.
Syntax
<RouterProvider router={router} />Parameters
| Name | Type | Description |
|---|---|---|
router | Router | The configured TanStack Router instance that RouterProvider mounts for the React application. |
Returns
A React element that provides TanStack Router functionality to its descendant component tree.
Key points
- The React package exports RouterProvider alongside router-construction APIs.
- A router instance is created before RouterProvider is rendered.
- The router instance is supplied through the provider's router prop.
- When integrating React Query, QueryClientProvider can wrap RouterProvider so the query client is available to the app.
- The provider is rendered as a React element in the application's root component.
Common mistakes
- RouterProvider needs a configured router instance; construct or create that router separately rather than passing route options directly to the provider.
Example: Render a TanStack Router
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
const router = createRouter({ routeTree })
export default function App() {
return <RouterProvider router={router} />
}Create a router from the generated route tree, then render it through RouterProvider at the application root.
When to use it
Combine routing with QueryClientProvider
React Query integration
Render a generated route tree
Generated routes
Interview questions
QWhat is RouterProvider used for?
RouterProvider renders the configured router for a React application. It receives the router instance through its router prop, as in <RouterProvider router={router} />.
Follow-up: How would you combine it with TanStack Query? Render QueryClientProvider around RouterProvider so both providers are available to the application.
QHow do you configure RouterProvider?
First create a router with the application's route tree, then pass that instance to RouterProvider. The documented example imports RouterProvider and Router, constructs the router, and renders the provider.
Follow-up: Why use a generated route tree? It supplies the route structure consumed when configuring the router.
QWhere should RouterProvider be rendered?
RouterProvider belongs at the application rendering boundary, where it can mount the router for the React tree. The official example exports an App component whose returned JSX is RouterProvider.
Follow-up: What commonly surrounds it in an application? A query client provider may wrap it when using React Query, as shown in the official integration example.
Related
createRouterRouterQueryClientProviderrouteTree