React Router Dom v6 - 函數作為 React 子節點無效

絕地施梅迪

我正在嘗試升級到反應路由器 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 子節點無效。如果您返回 Component 而不是從 render 返回，則可能會發生這種情況。或者，您可能打算調用此函數而不是返回它。

項目中的大部分組件都是功能組件。所以讓這個工作是很重要的。：/

德魯里斯

Route在 RRDv6 中將組件渲染為 a的語法是作為 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>,
    ),
  };
};