[{"_1":2,"_51":-5,"_52":-5},"loaderData",{"_3":4,"_7":8,"_50":-5},"root",{"_5":6},"path","/blogs/tags/remix","pages/Tag",{"_9":10,"_46":47,"_19":21,"_48":49},"posts",[11],{"_12":13,"_14":15,"_16":17,"_19":20,"_24":25,"_26":27,"_28":29,"_32":33,"_36":37,"_38":39},"id","cm3yiyxtm03cd07prqhjzojkp","publishDate","2024-11-15","category",[18],"guide","tag",[21,22,23],"remix","web-development","programming","slug","routing-in-remix-nested-routes-layouts-and-dynamic-segments","title","A Detailed Guide to Routing in Remix: Nested Routes, Layouts and Dynamic Segments","excerpt",{"_30":31},"text","In this guide, we’ll cover the different routing methods in Remix, including file-based routing, nested routes, dynamic segments, and layouts. We’ll dive into each with detailed examples to help you understand how they work and discuss the cleanest approach to use.","coverImg",{"_34":35},"url","https://ap-south-1.graphassets.com/AHDh3MjtFRAmkhgRu025Qz/cm81hfbjw0r9t07pazh8whpai","content","# Introduction\n\nRouting is a central part of building applications in Remix. There are several ways to handle routes, which can make things a bit confusing. In this guide, we’ll walk through each routing method including nested routes, dynamic segments, and file-based conventions with examples. We'll also discuss which approach keeps things the cleanest, so you can choose what works best for your project.\n\n> **Note: The code examples are in TypeScript, but the approach is the same for JavaScript.**\n\n# Ways of defining routes in Remix\n\nThe three main conventions for defining routes in Remix are -\n\n- **Basic Convention:** \n This is the most straightforward approach, where routes are defined directly in the `routes` folder using files like `about.tsx`. It's simple and works well for small applications.\n\n- **Route Folders:**\n In this convention, you organize routes using folders. For example, `about/route.tsx` would handle the route for `/about`. It allows for better structure, especially in larger apps with multiple layouts and nested routes.\n\n- **Function Based:**\n Here, routes are defined using functions instead of files. This approach gives you more flexible and easier to understand.\n\n# Routing with Basic Convention\n\nThis is the key convention used by Remix for routing. In this section, we'll cover how to define routes using the basic convention, including layouts, basic route definitions, dynamic segments, and handling 404 pages.\n\n## Creating a basic route\n\nIn `routes` directory, create `about.tsx`.\n\n```tsx\n// `routes/about.tsx`\nconst About = () => {\n return

About Page

;\n};\n```\n\nVisit `/about` page, you'll see this component being rendered.\n\nYou can keep creating individual pages like this.\n\n## Nested Routes\n\nWe currently have about page. Let's make a `/about/paul` route.\n\nCreate `about.paul.tsx` file.\n\n```tsx\n// `routes/about.paul.tsx`\nconst About = () => {\n return

About Paul

;\n};\n```\n\nYou can go as deep you want with this method.\n\nHowever, if you go back to the /`about` page, you would see it's not working anymore. This is because when you create a new file like `about.paul.tsx` inside the `routes` folder, it directly overrides the `/about` route.\n\nTo keep both, rename the `about.tsx` to `about._index.tsx`. This means about will have an index page at `/about` and it can aslo have childrens like `/about/paul`.\n\n## Nested Routes with Layout\n\nCurrently, we have two routes i.e. `/about` and `/about/paul`. Let's make a custom layout which will be used for every route including the index.\n\nCreate `about.tsx` again.\n\n```tsx\n// `routes/about.tsx`\nimport { Outlet } from \"@remix-run/react\";\n\nconst About = () => {\n return (\n

\n Shared Layout\n \n

\n );\n};\n```\n\nVisit both `/about` and `/about/paul`, they should be having Shared Layout word on top of them. You can use this to make any specific design or configuration for multiple nested routes.\n\n## Dynamic Routes\n\nTo create a route with dynamic segments, do the following -\n\nCreate a `about.$name.tsx`.\n\n**`$`** sign indicates the dynamic segment. You can also chain multiple dynamic segments like `about.$name.$place.tsx`\n\nLater you can get both name and place either in [Loader functions](https://remix.run/docs/en/main/discussion/data-flow#route-loader) or in client-side via [useParams](https://remix.run/docs/en/main/hooks/use-params) hook.\n\n## Folder Tree Overview\n\n```\napp/\n├── routes/\n│ ├── _index.ts\n│ ├── about.tsx\n│ ├── about._index.tsx\n│ ├── about.paul.tsx\n│ ├── about.$name.tsx\n│ ├── about.$name.$place.tsx\n└── root.tsx\n```\n\n# Routing with Route Folders Convention\n\nThis is very similar to the above [Basic Covention](#routing-with-basic-convention) but with a more manageble format. Here, we can make folders per route which allows us to keep any route-specific components or utilities in that specifc folder.\n\n**You can also mix and match these 2 conventions.**\n\n## Creating a basic route\n\nIn `routes` directory, create `about._index/route.tsx`.\n\n```tsx\n// `routes/about._index/route.tsx`\nconst About = () => {\n return

About Page

;\n};\n```\n\nVisit `/about` page, you'll see this component being rendered.\n\nAs you can see, the folder name would be the route path and it should contain a `route.ts`.\n\n**This is benifical as we can now put any file like `utils.ts` in `about` dir which will be specific to this route or page.**\n\n## Nested Routes\n\nCreate `/about.paul/route.tsx` file.\n\n```tsx\n// `routes/about.paul/route.tsx`\nconst About = () => {\n return

About Paul

;\n};\n```\n\nSame as before, but here the folder name should be the route path.\n\n## Nested Routes with Layout\n\nCurrently, we have two routes i.e. `/about` and `/about/paul`. Let's make a custom layout which will be used for every route including the index.\n\nFirst rename `about` folder to `about._index` and create `about/route.tsx` again.\n\n```tsx\n// `routes/about/route.tsx`\nimport { Outlet } from \"@remix-run/react\";\n\nconst About = () => {\n return (\n

\n Shared Layout\n \n

\n );\n};\n```\n\nNow, your routes under `/about` including the index will inherit the shared layout.\n\n## Dynamic Routes\n\nTo create a route with dynamic segments, do the following -\n\nCreate a `/about.$name/route.tsx`.\n\n**`$`** sign indicates the dynamic segment. You can also chain multiple dynamic segments like `/about.$name.$place/route.tsx`\n\nLater you can get both name and place either in [Loader functions](https://remix.run/docs/en/main/discussion/data-flow#route-loader) or in client-side via [useParams](https://remix.run/docs/en/main/hooks/use-params) hook.\n\n## Folder Tree Overview\n\n```\napp/\n├── routes/\n│ ├── _index.ts\n│ ├── about/\n│ │ ├── Header.tsx\n│ │ └── route.tsx\n│ ├── about._index/\n│ │ └── route.tsx\n│ ├── about.paul/\n│ │ └── route.tsx\n│ ├── about.$name/\n│ │ └── utils.tsx\n│ │ └── route.tsx\n│ ├── about.$name.$place/\n│ │ └── route.tsx\n└── root.tsx\n```\n\n**Note: `Header.tsx` and `utils.tsx` are included here to illustrate that you can organize route-specific components or utilities within their respective folders.**\n\n# Routing with Function Based Convention\n\nThis is a completely different way to handle routing in Remix and follows a function based approach rather than file-based like the previous ones.\n\n## Creating a basic route\n\nFirstly, you can delete the `routes` folder as we won't be using file-based appraoch anymore.\n\nCreate `config.ts` or a any name you want.\n\n```ts\nimport { DefineRouteFunction } from \"@remix-run/dev/dist/config/routes\";\n\nexport const routesConfig = (route: DefineRouteFunction) => {\n // `Home.tsx` is inside `pages` dir.\n route(\"/\", \"pages/Home.tsx\");\n};\n```\n\n**I like to keep my pages inside `pages` dir, you can keep them anywhere you want.**\n\nEdit `vite.config.ts`,\n\n```ts\n// `vite.config.ts`\nimport { vitePlugin as remix } from \"@remix-run/dev\";\nimport { defineConfig } from \"vite\";\nimport { routesConfig } from \"./app/config\";\n\nexport default defineConfig({\n plugins: [\n remix({\n routes: (defineRoutes) => defineRoutes(routesConfig),\n }),\n ],\n});\n```\n\n## Nested Routes\n\nModifying the routes config inside `config.ts` to add nested routes.\n\n```ts\nexport const routesConfig = (route: DefineRouteFunction) => {\n route(\"/about\", \"pages/About.tsx\");\n route(\"/about/paul\", \"pages/About-Paul.tsx\");\n};\n```\n\n## Nested Routes with Layout\n\nModifying the routes config inside `config.ts` to add nested routes with custom layout.\n\n```ts\nexport const routesConfig = (route: DefineRouteFunction) => {\n // `layouts/Shared-Layout.tsx` is the component with ``\n route(\"/about\", \"layouts/Shared-Layout.tsx\", () => {\n // Index page for /about\n route(\"/\", \"pages/About.tsx\", { index: true });\n // Page for `/about/paul`\n route(\"/paul\", \"pages/About-Paul.tsx\");\n });\n};\n```\n\nNow, your routes under `/about` including the index will inherit the shared layout.\n\n## Dynamic Routes\n\nModifying the routes config inside `config.ts` to add dynamic routes.\n\n```ts\nexport const routesConfig = (route: DefineRouteFunction) => {\n route(\"/about/:name\", \"pages/About-Profile.tsx\");\n // OR\n route(\"/about/:name/:place\", \"pages/About-Profile-Place.ts\");\n};\n```\n\nLater you can get both name and place either in [Loader functions](https://remix.run/docs/en/main/discussion/data-flow#route-loader) or in client-side via [useParams](https://remix.run/docs/en/main/hooks/use-params) hook.\n\n## Final Routes Config Overview\n\n```ts\nexport const routesConfig = (route: DefineRouteFunction) => {\n route(\"/about\", \"layouts/Shared-Layout.tsx\", () => {\n route(\"/\", \"pages/About.tsx\", { index: true });\n route(\"/paul\", \"pages/About-Paul.tsx\");\n\n route(\"/about/:name\", \"pages/About-Profile.tsx\");\n route(\"/about/:name/:place\", \"pages/About-Profile-Place.ts\");\n });\n};\n```\n\n# Handling 404 Pages\n\nAll 404 pages will be caught by the `ErrorBoundary` in `root.tsx`.\n\nModifying `root.tsx` error boundary to configure 404 page.\n\n```tsx\nexport function ErrorBoundary() {\n const error = useRouteError();\n\n return (\n \n \n \n \n \n \n \n \n {isRouteErrorResponse(error) && error.status === 404 ? (\n \n ) : (\n \n )}\n \n \n \n );\n}\n```\n\nHere, you can check if the error is of status 404 and conditionally render a `` component.\n\n# Which Routing Convention is the Best?\n\n- **Mix of Basic and Route Folder Conventions:** If you feel comfortable with the first two file-based approaches, consider using a mix of both. For simpler routes, you might use the basic `about.tsx` style. For routes with more configuration, use the folder-based `about.$name/route.tsx` structure to keep related files organized.\n\n- **Function-Based Convention:** If you find the file-based options a bit too complex or confusing, the function-based approach is the cleanest and simplest to manage overall.\n\n# More Resources\n\n**Some community-driven solutions:**\n\n- [remix-flat-routes](https://github.com/kiliman/remix-flat-routes)\n\n- [remix-custom-routes](https://github.com/jacobparis-insiders/remix-custom-routes)\n\n- [remix-json-routes](https://github.com/brophdawg11/remix-json-routes)\n\nFor more information, visit the Remix [Documentation](https://remix.run/docs/en/main/file-conventions/routes).\n\n# Conclusion\n\nIn this guide, we covered Remix's routing conventions in detail, including nested routes and layouts, dynamic segments, and 404 handling. Each routing convention has its strengths, and the choice depends on your project's complexity and your preferences. Personally, I find the function-based approach to be the cleanest and most scalable option overall.","author",{"_40":41,"_42":43,"_44":45},"name","Nilotpaul","img","https://avatars.githubusercontent.com/u/112468300?v=4","social","https://github.com/nilotpaul","hasMorePosts",false,"page",1,"layouts/HomeLayout","actionData","errors"]