React Router Dom v6 - 函数作为 React 子级无效答案

【问题标题】：React Router Dom v6 - Functions are not valid as a React childReact Router Dom v6 - 函数作为 React 子级无效
【发布时间】：2021-11-17 15:26:27
【问题描述】：

我正在尝试升级到 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 的文档后，我让应用程序正常工作，并将开玩笑的包装器更新为以下解决方案：

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

这会导致以下错误：

警告：函数作为 React 子级无效。如果发生这种情况你返回一个组件而不是从渲染。或许你的意思是调用这个函数而不是返回它。

项目中的大部分组件都是功能组件。所以让它发挥作用是至关重要的。：/

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案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>,
    ),
  };
};

【讨论】：