在 v6 React 路由器中测试页面时“无法读取未定义的属性（读取'路径名'）”

jon*_*rpe 24

React Router v6 将历史分成多个部分，对于这个用例，相关部分是navigator和location。在Use useNavigateinstead ofuseHistory中暗示了这种变化，您可以在propsNavigator中使用的类型的定义中看到它：Router

export declare type Navigator = Omit<History, "action" | "location" | "back" | "forward" | "listen" | "block">;

只是更改history={history}为navigator={history}仍然保留未定义的location道具，路由器试图从中访问pathname（以及其他属性）。要使测试再次工作，请按如下方式更新渲染：

const { render } = require("@testing-library/react");
const { createMemoryHistory } = require("history");
const React = require("react");
const { Router } = require("react-router-dom");

it("works", () => {
  const history = createMemoryHistory();
  render(
    <Router location={history.location} navigator={history}></Router>
  );
});