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