默认导出后，React Components为空

Question

我刚开始建立一个新的React项目并遇到问题，我不知道如何解决它。

我的静态组件null在默认导出之后。在将其分成不同的文件之前，所有文件都可以正常工作。如果我将静态AddExpense组件移回AppRoute.js文件，它仍然可以正常工作。

这里有什么问题？

import React from 'react';

const AddExpensePage = () => (
    <div>
        This is from my add AddExpensePage
    </div>
);

export default AddExpensePage;

import {ExpenseDashBordPage} from '../components/ExpenseDashBordPage'
import {AddExpensePage} from '../components/AddExpensePage';
import {HelpPage} from '../components/HelpPage';
// import {Header2} from '../components/Header';
import React from 'react';
import {BrowserRouter, Route, Switch,NavLink} from 'react-router-dom';


const EditPage = () => (
    <div>
    This is the edit Page
    </div>
)

const NotFoundPage = () => (
    <div>
    404! <NavLink to="/">Go Home</NavLink>
    </div>
)


const Header =() => (
    <header><h1>Expensify</h1>
    <NavLink activeClassName="is-active" exact = {true} to="/">Go Home</NavLink>
    <NavLink activeClassName="is-active" to="/create">create</NavLink>
    <NavLink activeClassName="is-active" to="/help">Help</NavLink>
    <NavLink activeClassName="is-active" to="/edit">Edit</NavLink>
    </header>
);


const AppRouter = () => (
    <BrowserRouter>
    <div>
    <Header/>
    <Switch>
        <Route path="/" component={ExpenseDashBordPage} exact= {true} />
        <Route path="/create" component={AddExpensePage}/>
        <Route path="/help" component={HelpPage}/>
        <Route path="/edit" component={EditPage}/>
        <Route component={NotFoundPage} />
    </Switch>
    </div>
    </BrowserRouter>
);

export default AppRouter;

Answer 1

AddExpensePage在这种情况下，您将导出为默认导出，

import {AddExpensePage} from '../components/AddExpensePage';
// this is when you are using named exports

您需要做的是重构您的导入语句，因为

import AddExpensePage from '../components/AddExpensePage';
// or
import {default as AddExpensePage} from '../components/AddExpensePage';