警告：React.createElement：型別無效——需要一個字串（對于內置組件）（ReactWebpackPhaser）

當我運行我的應用程式時，它沒有在頁面中顯示任何內容，這是在控制臺中顯示的錯誤：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (react-dom.development.js?61bb:23965)
    at createFiberFromElement (react-dom.development.js?61bb:23988)
    at reconcileSingleElement (react-dom.development.js?61bb:14233)
    at reconcileChildFibers (react-dom.development.js?61bb:14293)
    at reconcileChildren (react-dom.development.js?61bb:16769)
    at updateHostRoot (react-dom.development.js?61bb:17258)
    at beginWork (react-dom.development.js?61bb:18624)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
    at invokeGuardedCallback (react-dom.development.js?61bb:292)

應用程式.js

import React from "react";
import Routes from './routes/index';

export class App extends React.Component {
    render() {
        return (
            <Routes />
        );
    }
}

索引.jsx

import Phaser from "phaser";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.jsx";
// import playGame from "./phaser/scene";
import Routes from './routes/index.js';

ReactDOM.render(
  <App />,
  document.getElementById("root") || document.createElement("div")
);

我已經看到了關于這個問題的所有主題，但我還沒有修復，我更改了幾次匯入或匯出方法，但沒有任何反應，我很感激任何幫助，謝謝。

編輯：我的index.js來自 Routes

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from '../pages/home/index.js';

class Routes extends React.Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/home" Component={Home} />
                </Switch>
            </Router>
            );
    };
}

export default Routes;

uj5u.com熱心網友回復：

您是否嘗試export在 App.js 中更改為export default？

編輯：

我曾經create-react-app做出的反應最小的設定，這種設定恰好把App.js在/src因此，這就是我將開始。我制作了這些檔案：

/src/App.js
/src/routes/index.js
/src/pages/home/index.js

in App.js（從問題中復制，但使用默認匯出）：

import React from "react";
import Routes from './routes/index';

export default class App extends React.Component {
    render() {
        return (
            <Routes />
        );
    }
}

在routes/index.js（從問題復制）：

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "../pages/home/index.js";

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/home" Component={Home} />
        </Switch>
      </Router>
    );
  }
}

export default Routes;

在pages/home/index.js（一個最小的作業helloworld）：

export default function App() {
  return (
    <h1>Hello World</h1>
  )
}

拋出的錯誤routes/index.js是沒有這樣的匯出叫做Switch. 所以我洗掉了它，整個代碼運行沒有錯誤。

uj5u.com熱心網友回復：

你可以這樣寫：

import React from "react";
import Routes from './routes/index';

class App extends React.Component {
    render() {
        return (
            <Routes />
        );
    }
}

export default App;

標籤：反应 网络包 移相器

上一篇：Ansible：通過ymlplaybook更改腳本值（.sh檔案）

下一篇：僅當以下范圍不為空時才設定值-轉置資料