默認導出后，React 組件為空

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