您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入 [英] You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

问题描述

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'));

出现以下错误:

元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义.您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入.无法跟踪问题的确切位置.

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. Unable to track where exactly the issue is.

推荐答案

我知道这听起来很傻，但尝试使用简单的 console.log 来检查所有导入的组件:

I know this may sound silly, but try to check all your imported components with a simple 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();

Put this before ReactDOM.render, after const history = createHistory();

其中包含 undefined 的行导致了问题.

The line with undefined in it is causing the problem.

这篇关于您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！