Route explainer

[weary inlet]

Is there a good explainer somewhere of routes that uses basic CRUD? Everything I see shows more exotic use cases, not simply having a folder with CRUD operations on an object

I went down a rabbit hole yesterday trying to implement the route system in this video on the official Remix docs site yesterday only to discover that this approach no longer works

https://remix.guide/resources/Ws68TSouit76

[languid hare]

The simplest approach is to use a route per operation - using action/Form in each to perform the operation: ```
routes/thing.create.tsx
routes/thing.$id.tsx
routes/thing.$id.update.tsx
routes/thing.$id.delete.tsx

That video is demonstrating the nested folder routing convention that was used as a default in v1. We switched to a flat routing convention in v2: https://remix.run/docs/en/main/file-conventions/routes

But you are free to continue to use the nested routing convention if you prefer it - we extracted that logic into a separate package you can leverage via the remix.config.js routes config: https://remix.run/docs/en/main/start/v2#upgrading-without-changing-files

[weary inlet]

What about nested layouts? How are they defined in this context?

[languid hare]

Each dot is a new child: https://remix.run/docs/en/main/file-conventions/routes#nested-routes

And an underscore at the end of a segment opts out of nested layouts: https://remix.run/docs/en/main/file-conventions/routes#nested-urls-without-layout-nesting

[weary inlet]

So in the example above routes/thing.tsx would be a layout. But thing.index.tsx is not the default index as I would expect based on the other patterns. It has to be thing._index.tsx

[languid hare]

Yes, you would want an index for UI specific to /thing. Unless you opt out of nesting on the others, then thing.tsx would be the only one that renders for /thing 😉

[sharp matrix]

index is a special case so you have to prefix _

if you just do thing.index that should match /thing/index instead of /thing

[sharp matrix]

Is there a good explainer somewhere of routes that uses basic CRUD?
@weary inlet here you have https://sergiodxa.com/tutorials/create-a-crud-with-remix

[weary inlet]

Thanks, that's helpful. Gotta say it feels like trying to shoehorn weird file naming conventions to create something that was solved elegantly over a decade ago. Why not just /articles/layout.tsx, /articles/index.tsx, articles/edit.tsx etc

Instead I have to mentally translate underscores and dollar signs

[sharp matrix]

you can create your own convention too if you prefer another one

[weary inlet]

I might do that, but first I needed to understand how the standard model works

[languid hare]

Some people prefer not having tons of [some-path]/layout.tsx and [some-path]/index.tsx files all over their codebase, making it harder to fuzzy search. The convention is just that - a convention that we've found to be pretty good for the majority of folks. We provide the routes config strictly because we know the default convention won't be everyone's cup of tea - which is totally fine! We hope to see other popular community libraries arise out of that - two popular ones are remix-flat-routes and remix-custom-routes

[sharp matrix]

and remix-custom-routes let's you build your own convention

[weary inlet]

Now I'm having a problem where it doesn't match challenge.$id.update I also have a route that's just challenge.$id for viewing a challenge but it's matching for both /challenges/$id and /challenges/$id/update

I can get it to work by changing the url structure to /challenges/update/$id and renaming the file accordingly but that's not the REST standard approach

[keen fern]

Is challenge.$id.update supposed to render nested inside of challenge.$id? If so, you'll need an <Outlet/> in challenge.$id

[weary inlet]

Oh now i see. Interesting approach. So in that case I need to show different JSX in challenge.$id if url is an edit route. I'll have to think about that. Thanks for the help

That ends up triggering two loaders for the same object. Is there a way to pass loader results down to <Outlet />

[weary inlet]

nm I discovered outlet context

[sharp matrix]

Rename the file to challenge.$id_.edit.tsx, the underscore at the end of $id prevent the UI nesting

[sharp matrix]

You can use the useRouteLoaderData, no need for Outlet context

I wrote my recommendation for how to access a route loader data depending on where you’re trying to access it https://sergiodxa.com/tutorials/access-loaders-data-in-remix

[weary inlet]

I'm trying useRouteLoaderData and it's not firing the loader.

This returns undefined
useRouteLoaderData("/routes/challenges.$id")

But if I create a local loader as a wrapper to the same file, I can get it

`
import {loader as challengeLoader} from './challenges.$id'

export const loader: LoaderFunction = async ({ request, params, context }) => {
return challengeLoader({ request, params, context })
}
`

[sharp matrix]

loaders are not requests by the hooks

also you need to pass the route ID

without the / at the beginning

but if challenges.$id is not matching the URL, you need to fetch with useFetcher().load

[weary inlet]

This also returns. undefined useRouteLoaderData("routes/challenges.$id")

useFetcher also returns a fetch object fetch.load() returns undefined on the strings "challenges.$id" "routes/challenges.$id" and "/challenges.$id"

Seems like these should throw exceptions if the inputs are bad but I'm probably not seeing the big picture.

I'm just going to go with my wrapper approach because it's more directly understandable by me