javascript - 默认导出后 React 组件为 null

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