Remix - Multiple dynamic segments matching single path

Question

I'm building an app with many dynamic paths involved, but Remix only support single dynamic path out of the box. I searched the docs but can't find anything that would allow me to achieve the following.

My Route structure looks like this:

$postType
- $collectionType
- - $id.tsx
- - index.tsx
- $id.tsx
- index.tsx

So it's basically a structure of post and collection types that gives me possible paths like this:

/books - renders $postType/index.tsx
/books/the-shining - renders $postType/$id.tsx dynamically
/books/authors - renders $postType/$collectionType/index.tsx
/books/authors/steven-king - renders $postType/$collectionType/$id.tsx dynamically

Unfortunately, out of the box, it takes only the first dynamic path it finds, so /books/the-shining would point to the $postType/$collectionType/index.tsx file.

Is there any way to tell Remix from the loader, that the collection type with that slug was not found and to go to another dynamic path?

Thanks a lot for any help!

Kiliman · Accepted Answer · 2022-12-07 14:20:20Z

1

Remix tries to match the longest route. Since /books/the-shining and /books/authors are ambiguous, Remix can only choose the longest route.

You will need to either update your route structure to give Remix a hint:

$postType.c.$collectionType.index.tsx -> /books/c/authors

Or you can use a splat $.tsx route as a catch-all, then dynamically parse the URL to determine which layout/route to render.

export function loader({request, params}: LoaderArgs) {
  const splat = params['*']
  const parts = splat.split('/')
  //...
}

There is an RFC for optional route segments that will first be in React Router and will eventually make it to Remix.

https://github.com/remix-run/react-router/discussions/9550

answered Dec 7, 2022 at 14:20

Kiliman

20.4k3 gold badges46 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remix - Multiple dynamic segments matching single path

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related