How to import and export dynamically in ES6

Question

In my component catalog for responsiveness, I installed index.js here.

import App from './App';
import Main from './Main/Main';
import Best from './Main/Best';
import Club from './Main/Club';
import Post from './Main/Post';

import Sidebar from './Sidebar/Sidebar';

export { App, Main, Best, Club, Post, Sidebar };

Use in other js,

import {
    App,
    Main,
    Best,
    Club,
    Post,
    Sidebar
} from '../scripts/Containers/index';

But when I make such a component, should I write import / export index.js instructions? Is there a magic way?

Please help me solve this problem!

Update (using @Bergi)

I modified this and it works well.

export { default as App } from './App';

export { default as Header } from './Header/Header';

export { default as Main } from './Main/Main';
export { default as Best } from './Main/Best';
export { default as Club } from './Main/Club';
export { default as Post } from './Main/Post';

export { default as Sidebar } from './Sidebar/Sidebar';

But it didn’t work

export * from './App';

export * from './Header/Header';

export * from './Main/Main';
export * from './Main/Best';
export * from './Main/Club';
export * from './Main/Post';

export * from './Sidebar/Sidebar';

To work with the above code, I changed it in the component

export default class Header extends Component {
    constructor(...args) {
        super(...args);

    }
}

to

export class Header extends Component {
    constructor(...args) {
        super(...args);

    }
}

I deleted the export defaultexport of modules! And the second export path works (not the first)

Thanks @Bergi :)

But I think that dynamic import / export will not be able to use.

Perhaps this is the best way, I think.