Dynamic Routes in Short Blog Tutorial don't work

[arjunbanker]

What version of Remix are you using?

1.16.1 (latest)

Are all your remix dependencies & dev-dependencies using the same version?

• [X] Yes

Steps to Reproduce

Follow instructions from the top through https://remix.run/docs/en/main/tutorials/blog#dynamic-route-params

Expected Behavior

Expect posts.$slug.tsx page to be loaded

Actual Behavior

posts.tsx is loaded instead

[michaelgainyo]

That's odd. post.$slug.tsx should not match posts.tsx. Maybe you meant posts.$slug.tsx.

[arjunbanker]

That's odd. post.$slug.tsx should not match posts.tsx. Maybe you meant posts.$slug.tsx.

thanks, fixed!

[brophdawg11]

I don't think the tutorial actually asks you to create a posts.tsx file anywhere. If you're created a posts.tsx layout route, then maybe you forgot to include an <Outlet />?

Here's an example of a working posts.$slug.tsx route: https://stackblitz.com/edit/remix-run-remix-sio9wk

[arjunbanker]

The blog tutorial starter template already has a posts.tsx file and that is what handles the route even to the more specific case, your example is different than the blug tutorial.

On Fri, May 19, 2023 at 7:08 AM Matt Brophy @.***> wrote:

I don't think the tutorial actually asks you to create a posts.tsx file anywhere. If you're created a posts.tsx layout route, then maybe you forgot to include an ?

Here's an example of a working posts.$slug.tsx route: https://stackblitz.com/edit/remix-run-remix-sio9wk

— Reply to this email directly, view it on GitHub https://github.com/remix-run/remix/issues/6423#issuecomment-1554638459, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAEVCOPOU4RR7QHN2U5OHDXG55GDANCNFSM6AAAAAAYG6LPVQ . You are receiving this because you authored the thread.Message ID: @.***>

[brophdawg11]

Where are you seeing that file? The command to get started is:

npx create-remix@latest --template remix-run/indie-stack blog-tutorial

Which sets up your app using the indie stack which contains these routes, and does not contain a posts.tsx file?

I also double checked the gitpod link and it contains the same base routes as the indie stack?

You want 2 route files for the tutorial:

• routes/posts._index.tsx -> renders at /posts
• routes/posts.$slug.tsx -> renders at /posts/[slug]

[arjunbanker]

just double checked and seems like it was user error originally, thanks for clarifying (and apologies for the confusion)!

[Zardw]

hello, I met a problem. The dynamic Segment doesn't work in blog toturial. @brophdawg11

[kiliman]

@Zardw, that looks like the old v1 routing. If you have v2 routing enabled in remix.config.js, then this will not work. v2 routing no longer uses folders for nesting.

You need to change your routes:

• routes/blogs/$slug.tsx -> routes/blogs.$slug.tsx
• routes/blogs/index.tsx -> routes/blogs._index.tsx

[Zardw]

thanks a lot, it ok now. maybe the toturial video is old.

[kiliman]

Unfortunately, any tutorial/video older than six months will not work directly with recent Remix versions as they don't implement the coming v2 features.