I am looking at a react and redux codebase that I can't unfortunately share here. The file structure has many levels of directories that follow the pattern of route directories containing component directories and the pattern repeats itself with a path. That is to say, a typical path is app/routes/charts/routes/bar/components/bar.js. In that case the components/bar.js sits next to an index.js file which is often the case (but not always). As the app has a lot of elements the directory structure is very busy. It seems that it all supports some sort of modularity, but it is a bit difficult to navigate. The fact that components sit in a route directory that recursively contains a similar path one or more times is a bit hard to understand. I'm also a bit confused about the purpose of all the nested routes directories. What I want to know is if this follows an idiomatic approach or strategy that I can look up and understand?
Reason for many nested route and component directories in a react project's file structure
Viewed 188
1 Answers
Unfortunately, the only person who can answer that is the person who structured the files.
Whether or not it makes any sense depends on the actual project and personal preference, but my guess would be there is a charts route in the app, with has its own child routes, one of which is bar, which may need not just components, but containers, styles, types, tests, etc., so it has its own components folder.
Ultimately, there's no right or wrong way (within reason) to build your directory structure. Provided it makes some modicum of sense and works for you/your colleagues, it's perfectly valid.
Maybe having a second routes folder is redundant, and simply having child folders with the route names would be simpler, but it's not a particularly unusual way to arrange things.
Related