So I am developing a site on React and trying to organize BrowserRouter, so for every ponent(page) I create a path in App.js like this

<Route exact path="/" ponent={Homepage} />
<Route path="/about" ponent={About} />

and I would like to add multiple ponents to create multiple routes like that. The question is, is there an efficient way to handle multiple imports from ONE folder that contains only .js files. I have a folder "./articles" and for every single file I want to export I do this now

import MyComponent1 from "./articles/MyComponent1.js";

Repeating this line only changing the last parameter doesn't seem right. Is there a trick for import that can make it more efficient?

So I am developing a site on React and trying to organize BrowserRouter, so for every ponent(page) I create a path in App.js like this

<Route exact path="/" ponent={Homepage} />
<Route path="/about" ponent={About} />

and I would like to add multiple ponents to create multiple routes like that. The question is, is there an efficient way to handle multiple imports from ONE folder that contains only .js files. I have a folder "./articles" and for every single file I want to export I do this now

import MyComponent1 from "./articles/MyComponent1.js";

Repeating this line only changing the last parameter doesn't seem right. Is there a trick for import that can make it more efficient?

• javascript
• reactjs
• refactoring

Share Improve this question Follow asked May 13, 2019 at 14:43 justreactingjustreacting 3311 silver badge44 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

If you want, you could make an index.js file in articles who's sole job is to collect the various ponents and export them from a single location. For example:

// /articles/index.js

export { default as MyComponent1 } from './MyComponent1.js';
export { default as MyComponent2 } from './MyComponent2.js';
export { default as MyComponent3 } from './MyComponent3.js';
export { default as MyComponent4 } from './MyComponent4.js';

// Used in another file:

import { MyComponent1, MyComponent2, MyComponent3, MyComponent4 } from './articles';

You can add an index.js file into the /articles directory and let that index.js file import and export all classes in the folder. Afterwards you can import all of the exports from the same path.

You can resolve this situation with node js (emulate import *):

• You need read folder with fs.stat library with your ponents
• You need get list of the files in array
• Then dynamically create router.js fs.writeFile file with all of this ponents
• After file was placed, your webpack fetch file again and then rebuild your bundle with many imports

If articles are different only by its content, but the structure is the same, I would suggest creating just one general 'Article` ponent that will show different stuff based on provided props and you can store the info of the article in some JSON or backend in some array and iterate over that. That will allow you to write the code once and just populating the array of articles with no need to maintain imports. Hope this helps!