React组件默认导出后为null，拆分文件失效求助

嘿，这问题其实是默认导出和命名导出的导入方式搞混啦！

你写的AddExpensePage组件用的是export default AddExpensePage;——也就是默认导出，但在AppRouter.js里你却用了命名导入的语法：

import {AddExpensePage} from '../components/AddExpensePage';

这就导致React找不到对应的命名导出，最终拿到的是null。

修复步骤 #

把导入语句改成默认导入的格式，去掉花括号就行：

import AddExpensePage from '../components/AddExpensePage';

同理，你可以检查下其他组件的导出方式：如果ExpenseDashBordPage和HelpPage是默认导出的，它们的导入也应该去掉花括号；如果是命名导出（比如export const ExpenseDashBordPage = ...），才需要用花括号导入。

补充说明 #

• 默认导出：一个文件只能有一个默认导出，导入时可以自定义名称，比如import MyAddPage from '../components/AddExpensePage';也能正常工作。
• 命名导出：一个文件可以有多个命名导出，导入时必须用对应名称加花括号，比如export const A = ...; export const B = ...;，导入就要import {A, B} from './file';。

你之前把组件移回同一个文件时能正常工作，是因为不需要跨文件导入，自然不会触发这个导入语法错误啦～

内容的提问来源于stack exchange，提问作者Florian Middendorf