`<MemoryRouter>`

型別宣告

declare function MemoryRouter(
  props: MemoryRouterProps
): React.ReactElement;

interface MemoryRouterProps {
  basename?: string;
  children?: React.ReactNode;
  initialEntries?: InitialEntry[];
  initialIndex?: number;
  future?: FutureConfig;
}

<MemoryRouter> 會將其位置儲存在陣列中。與 <BrowserHistory> 和 <HashHistory> 不同的是，它不會繫結到外部來源，例如瀏覽器的歷史記錄堆疊。這對於你需要完全控制歷史記錄堆疊的場景（例如測試）非常理想。

<MemoryRouter initialEntries> 預設值為 ["/"] （一個在根 URL / 的單一項目）
<MemoryRouter initialIndex> 預設值為 initialEntries 的最後一個索引

提示

React Router 的大部分測試都是使用<MemoryRouter> 作為真實來源所編寫的，因此只要瀏覽我們的測試，你就可以看到一些很棒的使用範例。

import * as React from "react";
import { create } from "react-test-renderer";
import {
  MemoryRouter,
  Routes,
  Route,
} from "react-router-dom";

describe("My app", () => {
  it("renders correctly", () => {
    let renderer = create(
      <MemoryRouter initialEntries={["/users/mjackson"]}>
        <Routes>
          <Route path="users" element={<Users />}>
            <Route path=":id" element={<UserProfile />} />
          </Route>
        </Routes>
      </MemoryRouter>
    );

    expect(renderer.toJSON()).toMatchSnapshot();
  });
});

`basename`

設定應用程式在 URL 中特定基本路徑下執行

function App() {
  return (
    <MemoryRouter basename="/app">
      <Routes>
        <Route path="/" /> {/* 👈 Renders at /app/ */}
      </Routes>
    </MemoryRouter>
  );
}

`future`

可選擇啟用的未來標誌組。建議盡早選用新發布的未來標誌，以簡化你未來升級到 v7 的過程。

function App() {
  return (
    <MemoryRouter future={{ v7_startTransition: true }}>
      <Routes>{/*...*/}</Routes>
    </MemoryRouter>
  );
}