我认为在排除这个错误时最重要的一点是，当您试图实例化一个不存在的组件时，它就会显现出来。这个组件不需要导入。在我的例子中，我将组件作为属性传递。我忘记更新其中一个调用，以便在一些重构之后正确地传递组件。不幸的是，由于JS不是静态类型的，我的错误没有被发现，它花了一些时间来弄清楚发生了什么。

要排除此错误，在呈现组件之前检查该组件，以确保它是您所期望的组件类型。

大多数情况下，这表示导入/导出错误。但是要注意，不仅要确保堆栈跟踪中引用的文件本身得到了良好的导出，还要确保该文件正确地导入了其他组件。在我的例子中，错误是这样的:

import React from //注意末尾的.css，这是错误的原因! import SeeminglyUnimportantComponent from './SeeminglyUnimportantComponent.css'; Const组件= (props) => ( < div > < SeeminglyUnimportantComponent / > {/ *……这里的组件代码*/} < / div > ）; 导出默认组件;

在我的例子中，我添加了相同的自定义组件作为道具，而不是实际的道具

   import AddAddress from '../../components/Manager/AddAddress';
    
    class Add extends React.PureComponent {
      render() {
        const {
          history,
          addressFormData,
          formErrors,
          addressChange,
          addAddress,
          isDefault,
          defaultChange
        } = this.props;
    

错误:

    return (
        <AddAddress
          addressFormData={addressFormData}
          formErrors={formErrors}
          addressChange={addressChange}
          addAddress={AddAddress} // here i have used the Component name as probs in same component itself instead of prob
          isDefault={isDefault}
          defaultChange={defaultChange}
        />
      </SubPage>

解决方案:

return (
    <AddAddress
      addressFormData={addressFormData}
      formErrors={formErrors}
      addressChange={addressChange}
      addAddress={addAddress} // removed the component name and give prob name
      isDefault={isDefault}
      defaultChange={defaultChange}
    />
  </SubPage>

试试这个

npm i react-router-dom@next

在你的App.js中

import { BrowserRouter as Router, Route } from 'react-router-dom'

const Home = () => <h1>Home</h1>

const App = () =>(
  <Router>
    <Route path="/" component={Home} />
  </Router>
)

export default App;

循环依赖也是原因之一。(一般)

对我来说，删除Switch解决了这个问题

import React from "react";
import "./styles.css";
import { Route, BrowserRouter, Routes } from "react-router-dom";
import LoginPage from "./pages/LoginPage";
import HomePage from "./pages/HomePage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<HomePage />} />
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </BrowserRouter>
  );
}