React中如何从index文件导出多组件？导入报错求助

我在React项目中尝试通过components/index.jsx统一导出组件，再在App.jsx中导入时遇到了语法错误。

index.jsx代码： #

import Navbar from './Navbar/Navbar';
import Greeting from './Greeting/Greeting'
import Project from './Project/Project';
import About from './About/About';
import Contact from './Contact/Contact';
import Footer from './Footer/Footer';

export default {
  Navbar,
  Greeting,
  Project,
  About,
  Contact,
  Footer,
};

App.jsx代码： #

import React from 'react';
import {Navbar} from './components';

// import Navbar from './components/Navbar/Navbar';

const App = () => {
  return (
    <div>
      <Navbar />
    </div>
  )
}

export default App;

报错信息： #

Uncaught SyntaxError: The requested module */src/components/index.jsx?t=1672200538218' does not provide an export named "Navbar"

请问通过index文件导入Navbar时哪里出错了？如何通过index文件导入多个组件？

错误原因 #

你在index.jsx中用**默认导出（export default）了一个包含组件的对象，但在App.jsx中却用命名导入（import {Navbar}）**的方式获取，两种导出导入方式不匹配，导致报错。默认导出的内容只能用默认导入语法获取，命名导入需要对应命名导出。

正确实现方式 #

方式一：命名导出+命名导入（推荐）

修改index.jsx，将每个组件改为命名导出：

export { default as Navbar } from './Navbar/Navbar';
export { default as Greeting } from './Greeting/Greeting';
export { default as Project } from './Project/Project';
export { default as About } from './About/About';
export { default as Contact } from './Contact/Contact';
export { default as Footer } from './Footer/Footer';

这样在App.jsx中就能继续使用命名导入，还可以按需导入多个组件：

// 单个导入
import {Navbar} from './components';

// 多个导入
import {Navbar, Greeting, Project} from './components';

方式二：默认导出+默认导入

如果不想修改index.jsx的导出方式，可在App.jsx中用默认导入后解构使用：

import React from 'react';
import Components from './components';
const {Navbar} = Components;

const App = () => {
  return (
    <div>
      <Navbar />
    </div>
  )
}

export default App;

或者直接通过对象访问：

import React from 'react';
import Components from './components';

const App = () => {
  return (
    <div>
      <Components.Navbar />
    </div>
  )
}

export default App;

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