reactjs - React Router v6 和 React.lazy 无法正常工作，引发错误

Question

我正在重构我的 React 应用程序并从 React Router v5 升级到 v6，通过一个非常简单的React.lazy()调用看到了这个错误：

Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}).
If you meant to render a collection of children, use an array instead.

import React, { lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Pizzas = () => lazy(() => import('./Components/Pizzas'));

const App = () => {
  return (
    <div>
      <Router>
        <Routes>
          <Route path="/" element={<Pizzas />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

Pizzas组件只是：

export const Pizzas = () => <div>Pizzas...</div>;

现在，如果我把它改成这个，它工作得很好：

import { Pizzas } from './Components/Pizzas';

...并且组件渲染得很好。这有点奇怪，我一直在用 React Router v6 寻找解决方案一个小时左右，但无济于事。我也在使用 Create React App 作为参考。

依赖项（package.json）

{
  "name": "project-name",
  "dependencies": {
    "@emotion/css": "^11.1.3",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.3",
    "history": "^5.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "6.0.0-beta.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

标签： reactjsreact-routerreact-router-dom