Create a new DataRouter that manages the application path using an in-memory History stack. Useful for non-browser environments without a DOM API.
function createMemoryRouter( routes: RouteObject[], opts?: MemoryRouterOpts, ): DataRouter Application routes
Basename path for the application.
Override the default data strategy of running loaders in parallel - see the docs for more information.
let router = createBrowserRouter(routes, { async dataStrategy({ matches, request, runClientMiddleware, }) { const matchesToLoad = matches.filter((m) => m.shouldCallHandler(), ); const results: Record<string, DataStrategyResult> = {}; await runClientMiddleware(() => Promise.all( matchesToLoad.map(async (match) => { results[match.route.id] = await match.resolve(); }), ), ); return results; }, }); Future flags to enable for the router.
A function that returns an RouterContextProvider instance which is provided as the context argument to client actions, loaders and middleware. This function is called to generate a fresh context instance on each navigation or fetcher call.
Hydration data to initialize the router with if you have already performed data loading on the server.
Initial entries in the in-memory history stack
Index of initialEntries the application should initialize to
Array of instrumentation objects allowing you to instrument the router and individual routes prior to router initialization (and on any subsequently added routes via route.lazy or patchRoutesOnNavigation). This is mostly useful for observability such as wrapping navigations, fetches, as well as route loaders/actions/middlewares with logging and/or performance tracing. See the docs for more information.
let router = createBrowserRouter(routes, { unstable_instrumentations: [logging] }); let logging = { router({ instrument }) { instrument({ navigate: (impl, info) => logExecution(`navigate ${info.to}`, impl), fetch: (impl, info) => logExecution(`fetch ${info.to}`, impl) }); }, route({ instrument, id }) { instrument({ middleware: (impl, info) => logExecution( `middleware ${info.request.url} (route ${id})`, impl ), loader: (impl, info) => logExecution( `loader ${info.request.url} (route ${id})`, impl ), action: (impl, info) => logExecution( `action ${info.request.url} (route ${id})`, impl ), }) } }; async function logExecution(label: string, impl: () => Promise<void>) { let start = performance.now(); console.log(`start ${label}`); await impl(); let duration = Math.round(performance.now() - start); console.log(`end ${label} (${duration}ms)`); } Lazily define portions of the route tree on navigations.
An initialized DataRouter to pass to <RouterProvider>