Render Nested Routes in Remix

We need to create an admin route where we can create and edit our blog posts.

First we’ll make a /admin route that has some JSX and a loader that returns all of the posts. But how do we create different pages for admin actions without repeating all this code? This answer is to use Remix’s nested routing feature!

Start by following a convention of naming a folder identically to your route, and having sub files that correspond to different sub pages such as index, new, and so on. Then in your AdminRoute, render the <Outlet /> component. This tells Remix to render nested routes in its place!

The index.tsx nested route will be the one that is rendered by default. In the index you can link to the other nested routes using Remix’s Link component.