What is difference between 'components' folder and 'pages' folder in React Router ?

What is difference between 'components' folder and 'pages' folder in React Router ?

Pages or Views as we call it are also components but they are routable thats why they are named as views or pages since they are pages which we see as views (an illusion) on a Single Page Application which are routable and they are components only.

Each component can further be composed of several small components in turn.

Like a Shopping List Component, it can contain several items which are itself components and we can nest as much as we can. There is no limit to that. Components are something that you can reuse throughout your application and can be rendered anywhere on any of the views like a button component if you want the same styled button to appear on the Login and SignUp Screen or Add to cart button etc.

So in essence, if something is a routable component or a complete page that you get on a route, then that should go to the pages folder. All other components that help in composition of a page or view should go to components folder.

This is a more elaborate setup but you could also restrict everything to components folder itself.

Screenshot (481).png