Function createMemoryRouter

Parameters

• routes: RouteObject[]

  Application routes
• Optionalopts: MemoryRouterOpts

  Options

  • Optionalbasename?: string

    Basename path for the application.

  • OptionaldataStrategy?: DataStrategyFunction<any>

    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;
      },
    });
    Copy

  • Optionalfuture?: Partial<FutureConfig>

    Future flags to enable for the router.

  • OptionalgetContext?: () => MaybePromise<RouterContextProvider>

    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.

  • OptionalhydrationData?: Partial<Pick<RouterState, "loaderData" | "actionData" | "errors">>

    Hydration data to initialize the router with if you have already performed data loading on the server.

  • OptionalinitialEntries?: InitialEntry[]

    Initial entries in the in-memory history stack

  • OptionalinitialIndex?: number

    Index of initialEntries the application should initialize to

  • OptionalpatchRoutesOnNavigation?: PatchRoutesOnNavigationFunction

    Lazily define portions of the route tree on navigations.

  • Optionalunstable_instrumentations?: unstable_ClientInstrumentation[]

    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)`);
    }
    Copy