警告: React.createElement: type无效--需要一个字符串(用于内置组件)(响应Webpack Phaser)
警告: React.createElement: type无效--需要一个字符串(用于内置组件)(响应Webpack Phaser)
提问于 2021-12-24 22:19:47
当我运行我的应用程序时，它没有在页面中显示任何内容，并且在控制台中显示了错误：
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)App.js
import React from "react";
import Routes from './routes/index';
export class App extends React.Component {
render() {
return (
<Routes />
);
}
}Index.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
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;回答 2
Stack Overflow用户
回答已采纳
发布于 2021-12-24 22:23:36
您试过将export在App.js中更改为export default吗？
编辑：
我使用create-react-app对react做了一个最小的设置，这个设置恰好将App.js放在/src中，所以我将从这里开始。我做了这些文件：
/src/App.js
/src/routes/index.js
/src/pages/home/index.js在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的此类导出。所以我删除了它，整个代码运行时没有错误。
Stack Overflow用户
发布于 2021-12-25 12:29:04
你可以这样写：
import React from "react";
import Routes from './routes/index';
class App extends React.Component {
render() {
return (
<Routes />
);
}
}
export default App;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70476832
复制相关文章
相似问题
腾讯云开发者
