File-Based vs. Directory-Based Routing: Understanding the Difference
It's not that complicated really
I don't know who did it, and why everyone is suddenly confused by this. What you are calling file-based routing is not what you claim. I will gladly explain.
I am going to use Next.js as an example:
This is file-based routing:
In the folder that defines your pages, if you are able to create a file in there and it automatically becomes a page (contact, about, services etc) that is file based routing.
File-based routing is a routing where the entry point to your routes is an index file. What that mean is the same way you can have a
contact.jsx , you could also make a
contact/index.js and these two would do exactly the same with little to no issues.
Frameworks that employ this:
Nextjs (with pages)s
This is directory based routing
│ └── page.js
With this way, there is a defined method of creating new pages i.e a folder with the file name and a special file within it.
When using this way, anything that does not follow this pattern is not regarded a page.
Frameworks that use this
Nextjs (with app)
A Table To Know What You Are Using
|Can I make a file name as a route and it works?
|Can I create a folder with an
index file and that will become the page?
|Do I have a special naming convention for pages?