Is it possible to do multiple class imports with ES6/Babel?

Question

I'm working on a react project (my first) and I've recently restructured my folder structure to make a bit more sense.

To make my life easier, within my component folders, I have an index.js file which looks like the following:

export * from './App'; export * from './Home'; export * from './PageWrapper'; 

(The idea was lifted from another StackOverflow Question)

In this case each of the files this index points to have a singular class export.

Now in my main application, I try and do something like:

import {Home, App} from './containers/index'; //or import Home from './containers/index'; 

Nothing works. I've found that if I separate them all out into individual lines pointing directly at the correct file, it works.

import Home from './containers/Home'; import App from './containers/App'; 

So is it possible to import multiple classes the way I'm doing it, and I'm just not seeing it? Do I perhaps need to name them all (App as App)? Or is this simply an enforced limitation?

Answer 1

You can export like this:

import App from './App'; import Home from './Home'; import PageWrapper from './PageWrapper';  export {     App,     Home,     PageWrapper } 

Then, you can import like this wherever you need it:

import { App, PageWrapper } from './index' //or similar filename  ... 

You can read more about import and export here. I also answered a similar question here.

Answer 2

I use export that looks something like this. In react it worked well

export {default as PublicRoute} from './PublicRoute'; export {default as PrivateRoute} from './PrivateRoute'; 

Then, you can import like this wherever you need:

import {PublicRoute, PrivateRoute} from './config/router'; ...