createRootRouteWithContext function
The createRootRouteWithContext function is a helper function that can be used to create a root route instance that requires a context type to be fulfilled when the router is created.
createRootRouteWithContext generics
The createRootRouteWithContext function accepts a single generic argument:
TRouterContext generic
- Type: TRouterContext
- Optional, but recommended.
- The context type that will be required to be fulfilled when the router is created
createRootRouteWithContext returns
- A factory function that can be used to create a new createRootRoute instance.
- It accepts a single argument, the same as the createRootRoute function.
Examples
tsx
import {
createRootRouteWithContext,
createRouter,
} from '@tanstack/react-router'
import { QueryClient } from '@tanstack/react-query'
interface MyRouterContext {
queryClient: QueryClient
}
const rootRoute = createRootRouteWithContext<MyRouterContext>()({
component: () => <Outlet />,
// ... root route options
})
const routeTree = rootRoute.addChildren([
// ... other routes
])
const queryClient = new QueryClient()
const router = createRouter({
routeTree,
context: {
queryClient,
},
})
import {
createRootRouteWithContext,
createRouter,
} from '@tanstack/react-router'
import { QueryClient } from '@tanstack/react-query'
interface MyRouterContext {
queryClient: QueryClient
}
const rootRoute = createRootRouteWithContext<MyRouterContext>()({
component: () => <Outlet />,
// ... root route options
})
const routeTree = rootRoute.addChildren([
// ... other routes
])
const queryClient = new QueryClient()
const router = createRouter({
routeTree,
context: {
queryClient,
},
})
'/%3e%3c/svg%3e)
'/%3e%3c/svg%3e)
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.