
It also helps practice some separation of concerns. Nesting routes helps to create more organized, and clear routes for both the developers and clients to make use of. Continuing our dev.to example from before, here is an example of a nested route:įirst, you route to /readinglist then you route to /archive while inside /readinglist, providing more specific information while still being inside that scope. Nested routing is the act of "burying" routes inside each other. If you'd like to read up on them before continuing, you can find the documentation here Going forward on this blog, I'm going to assume that you have a basic understanding of Switches and Routes in react-router. If you're using React to build your webpage and you want to accomplish something like that, then you'll want to turn your attention to react-router-dom! React-router is a node module that makes use of the React component structure to add client-side routing functionality to a webpage. Server-side routes are used in multi-page applications, where each route returns a new html page with content. They allow for routing capabilities without needing multiple html pages. Client-side routes are generally used in single-page applications.

They either have client-side or server-side routes. Ever wondered how websites have custom paths? How come you can type in and your browser knows to bring you directly to your dev.to reading list? Well, the website you're navigating to, in our case dev.to, has set up some custom routes.
