`createMemoryRouter`

記憶體路由器在記憶體中管理自己的歷史堆疊，它不使用瀏覽器的歷史紀錄。它主要是用於測試和組件開發工具（例如 Storybook），但也可以用在任何非瀏覽器的環境中執行 React Router。

import {
  RouterProvider,
  createMemoryRouter,
} from "react-router-dom";
import * as React from "react";
import {
  render,
  waitFor,
  screen,
} from "@testing-library/react";
import "@testing-library/jest-dom";
import CalendarEvent from "./routes/event";

test("event route", async () => {
  const FAKE_EVENT = { name: "test event" };
  const routes = [
    {
      path: "/events/:id",
      element: <CalendarEvent />,
      loader: () => FAKE_EVENT,
    },
  ];

  const router = createMemoryRouter(routes, {
    initialEntries: ["/", "/events/123"],
    initialIndex: 1,
  });

  render(<RouterProvider router={router} />);

  await waitFor(() => screen.getByRole("heading"));
  expect(screen.getByRole("heading")).toHaveTextContent(
    FAKE_EVENT.name
  );
});

類型宣告

function createMemoryRouter(
  routes: RouteObject[],
  opts?: {
    basename?: string;
    future?: FutureConfig;
    hydrationData?: HydrationState;
    initialEntries?: InitialEntry[];
    initialIndex?: number;
  }
): RemixRouter;

`initialEntries`

歷史堆疊中的初始化記錄。它允許你能開始一個測試（或應用程式），瀏覽器的歷史堆疊中已經有幾個位置了（例如測試返回瀏覽）。

createMemoryRouter(routes, {
  initialEntries: ["/", "/events/123"],
});

`initialIndex`

要渲染的歷史堆疊中的初始化記錄索引。它允許你從特定記錄開始測試。預設值是 initialEntries 中的最後一筆記錄。

createMemoryRouter(routes, {
  initialEntries: ["/", "/events/123"],
  initialIndex: 1, // start at "/events/123"
});

其他 props

所有其他 props，請查看 createBrowserRouter