React route organization

Learn how to declutter app.js by introducing routes in another fashion

So let's say that we have an app with a ton of routes, instead of just shoving everything into our app.js file, we can instead move everything into an index file in our screens/pages folder. For example,

Here we have an app.js file that imports every screen into app.js like this. this can clutter up our app.js file and be confusing down the line as we add functionality to our file. instead what we want to do here is separate where we keep the routes and import that file instead.

so it would look a little like this instead. now instead of having our routes defined in the return function on app.js, we’ll have it in our return function in index.js inside of our screens folder. this can be named what you want it to be named (for instance, routes.)

We will then make sure to export this function as Routes() which we can then call in app.js

This will make sure that we have a separation in how we organize the files and make sure we can keep organized.

Styling and class names can be applied here or in app.js