導入未定義的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導入的路由可以解決此問題。