默认导出后，React Components为空

Question

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

默认导出后，我的静态组件为空。在将其分成不同的文件之前，所有方法都可以正常工作。如果我将静态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';