dynamic route not getting rendered

[dagda1]

Here is a stackblitz and I have this set up of routes:

I would expect a url of /posts/something to render the $slug file but instead a 404 Not Found is returned.

This is my first time using remix but I'm not sure what I am doing wrong.

[dcmusiclive-team]

Not an answer, but I'm running into this same issue after following the Blog Tutorial and getting to the Dynamic Route Params part.

I've also been able to reproduce this with the following steps:

1. Run npx create-remix@latest --template remix-run/indie-stack blog-tutorial and follow prompts
2. Create a posts folder with a file called $slug.tsx
3. Paste the code snippet to app/routes/posts/$slug.tsx:

export default function PostSlug() {
  return (
    <main className="mx-auto max-w-4xl">
      <h1 className="my-6 border-b-2 text-center text-3xl">
        Some Post
      </h1>
    </main>
  );
}

4. Try to go to localhost:3000/routes/some-slug-here --> Redirected to 404 with the console saying No routes matched location

[kiliman]

FYI: routes is not part of the URL. That's simply the folder where all your routes are stored. You should try to access /posts/some-slug-here

[dcmusiclive-team]

Mistyped. /posts/some-slug-here was the route I accessed.

[kiliman]

The reason why it's not working is that you've enabled v2_routeConvention, but you're not using it properly. Once you use folders, every route must be a folder, and the route module is the file named route.tsx.

I've updated your stackblitz
https://stackblitz.com/edit/node-o2w958?file=app%2Froutes%2Fposts%2F%24slug%2Froute.tsx

Your other option is to use flat files (without any folders). These two are equivalent.

[nlindroos]

Just created npx create-remix@latest --template remix-run/indie-stack as described in the short tutorial, resulting in

// remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  cacheDirectory: "./node_modules/.cache/remix",
  future: {
    v2_errorBoundary: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
  ignoredRouteFiles: ["**/.*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
};

// package.json

  "dependencies": {
    "@remix-run/css-bundle": "^1.15.0",
    "@remix-run/node": "^1.15.0",
    "@remix-run/react": "^1.15.0",
    "@remix-run/serve": "^1.15.0",
    ...
  },
  "devDependencies": {
    "@remix-run/dev": "^1.15.0",
    "@remix-run/eslint-config": "^1.15.0",
    ...

[starkajs]

I'm on v.15.0 and have started a brand new project, no changes, using the indie-stack remix and for the life of me cannot get the folders to work in the manner you have them in the stackblitz example you have (https://stackblitz.com/edit/node-o2w958?file=app%2Froutes%2Fposts%2F%24slug%2Froute.tsx)

Is the folder structure no longer supported? It's not really clear (to me) from the documentation as to how to structure the folders in the v.15.0. Can you point to a working example on the site somewhere as I can't see anything.

Thanks
Andrew

[kiliman]

Yes, apparently, Remix v2 routing no longer supports folders for organization; Only for colocation. The entire route name must be dot-separated.

routes/posts.$slug/route.tsx
routes/posts._index/route.tsx

You can use remix-flat-routes if you want to use folders for organization. This is called hybrid routes.

[yira-gallardo]

I had this same problem and struggled a lot to find answers.
The _.index name made it work, but not a fan of that suffix.

[rex-empowerdigital]

Thanks @kiliman. Your suggestion works for me.

[kellyrmilligan]

had the same issue following the tutorial and ended up here. the tutorial should either have the command not enable the feature flags for v2 or be updated to use the new conventions most likely.

[wearypossum4770]

I was having an error in my system. Seems like when I try to use dynamic routing my terminal automagically thinks it is a shell variable and removes it. as you can see I attempted to move the posts..tsx file to the posts.$slug.tsx but my system recognizes them as the same. Maybe this routing idea wasn't the best. Could we get some type of modification with a different character maybe "@" or ":" .

[kiliman]

You need to escape the $ in the shell by using \$. In my package remix-flat-routes I have an option to change the param prefix.

https://github.com/kiliman/remix-flat-routes#custom-param-prefix