React Router Dom v6 - 函数作为 React 子项无效

Question

我正在尝试升级到 React router dom v6。该应用程序可以工作，但我似乎无法让测试用例工作。

在我们有了这个笑话包装之前：

const render = (ui: React.FC, path: string, route: string): RenderResult => {
    const history = createMemoryHistory({ initialEntries: [route] });
    const queryClient = new QueryClient({
        defaultOptions: {
            queries: {
                retry: false,
            },
        },
    });

    return {
        ...render(
            <QueryClientProvider client={queryClient}>
                <Router history={history}>
                    <Route path={path} component={ui} />
                </Router>
            </QueryClientProvider>,
        ),
    };
};

按照 v6 的文档进行操作后，我让应用程序正常工作，并将 jest 的包装器更新为以下解决方案：

return {
        ...render(
            <QueryClientProvider client={queryClient}>
                <Router location={history.location} navigator={history}>
                    <Routes>
                        <Route path={path} element={ui} />
                    </Routes>
                </Router>
            </QueryClientProvider>,
        ),
    };

这会导致以下错误：

警告：函数作为 React 子项无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。

项目中的大部分组件都是功能组件。因此，让它发挥作用非常重要。:/

Answer 1

RRDv6中将组件呈现Route为 JSX 文字的语法，而不是组件的引用。

例子：

<Route path="/thepath" element={<MyComponent />} />

对于您的示例，它是ui必须呈现为 JSX 的组件。重命名ui为Ui，使其成为有效的 React 组件并相应地进行渲染。

const render = (Ui: React.FC, path: string, route: string): RenderResult => {
  const history = createMemoryHistory({ initialEntries: [route] });
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
  });

  return {
    ...render(
      <QueryClientProvider client={queryClient}>
        <Router location={history.location} navigator={history}>
          <Route
            path={path}
            element={<Ui />} // <-- JSX, not reference
          />
        </Router>
      </QueryClientProvider>,
    ),
  };
};