import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import createHistory from 'history/createBrowserHistory';
import { Provider } from 'react-redux';
import ConnectedRouter from 'react-router-redux';
import { Route, Switch } from 'react-router';
import Home from "./pages/Home";
import Register from "./pages/Register";
import CourseManagerDashboard from "./pages/CourseManagerDashboard";
import CourseDetail from "./pages/CourseDetail";
import App from './app/App';
import LoginForm from './components/LoginForm';
const store = createStore(
state => state
);
const history = createHistory();
ReactDOM.render((
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route name="home" exact path="/" component={Home} />
<Route name="register" path="/register" component={Register} />
<Route name="course-manager-dashboard" path="/course-manager-dashboard" component={CourseManagerDashboard} />
<Route name="course-detail" path="/course-detail" component={CourseDetail} />
<Route name="login" path="/login" component={LoginForm} />
<Route path="/" component={App} />
</Switch>
</ConnectedRouter>
</Provider>
),document.getElementById('app'));
出现以下错误:
元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:未定义。您可能忘记从定义它的文件中导出组件,或者您可能混淆了默认导入和命名导入。 无法追踪问题到底出在哪里。
最佳答案
我知道这可能听起来很愚蠢,但尝试使用简单的 console.log
检查所有导入的组件:
console.log('Provider', Provider);
console.log('ConnectedRouter', ConnectedRouter);
console.log('Route', Route);
console.log('Switch', Switch);
console.log('Home', Home);
console.log('Register', Register);
console.log('CourseManagerDashboard', CourseManagerDashboard);
console.log('CourseDetail', CourseDetail);
console.log('App', App);
console.log('LoginForm', LoginForm);
将其放在 ReactDOM.render
之前,const history = createHistory();
其中包含 undefined
的行导致了问题。
关于reactjs - 您可能忘记从定义它的文件中导出组件,或者您可能混淆了默认导入和命名导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54075718/