默认导出后，React 组件为空

Question

I just started to set up a new React project and ran into a problem and I don't have any idea how to fix it.

My static components are null after a default export. Before I seperate this into different files, all works perfectly. If I move my static AddExpense component back to my AppRoute.js file, again it still works.

What is the problem here?

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

You are exporting AddExpensePage as a default export in that case you don't need to do

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

what you need to do is refactor your import statements as this

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