导入未定义的React组件

Question

我有以下两种方法来声明一个称为DashboardComponent的react组件。

export default function DashboardComponent() {
    return <div>test</div>
}

export default class DashboardComponent extends React.Component {
    render() {
        return <div>test</div>
    }
}

当测试这两个时，我评论了另一个。

问题是当我用

import DashboardComponent from './main/dashboard-component';
console.log(DashboardComponent);

第一个返回一个function ，第二个返回undefined 。 为什么会这样呢？

Answer 1

问题是我有一个循环依赖。

我有一个带有路由的文件，在这里我正在导入DashboardComponent

import DashboardComponent from './main/dashboard-component';

const routes = [
    {
        label: 'Dashboard',
        path: "/",
        exact: true,
        component: DashboardComponent,
        icon: 'home'
    },
...
]

另外，我在DashboardComponent包含了路由文件。 这是从我以前的测试中得出的。 删除从DashboardComponent导入的路由可以解决此问题。