[Bug?]: rename the index.tsx file to the name of the folder always gives a 404

[oluijks]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

As per documentation you should be able to rename the file to match the directory but that always (even in production build) returns a 404.

PS: congrets on reaching v1 ;-)

Expected behavior 🤔

The route should be rendered.

Steps to reproduce 🕹

Steps:

1. create route like: routes/auth/auth.tsx
2. visit http://localhost:3000/auth
3. result: 404 page not found

Context 🔦

No response

Your environment 🌎

System:
    OS: Linux 6.8 Fedora Linux 39 (Workstation Edition)
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-1360P
    Memory: 3.37 GB / 15.21 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm
    pnpm: 9.1.1 - ~/.local/share/pnpm/pnpm
    bun: 1.1.9 - ~/.bun/bin/bun
  Managers:
    Yum: 4.19.2 - /usr/bin/yum

[ryansolid]

This is a misunderstanding I think.

routes/auth/auth.tsx produces /auth/auth

You want

routes/auth/(auth).tsx or routes/auth/index.tsx

Same name convention is around nesting layouts being the same name as a folder. Otherwise we follow the index convention. We just have it so empty is also the same index. And everything between () is removed. But like in this example it could be named whatever and be the same:

routes/auth/(whatever).tsx also produces /auth

[oluijks]

Thank you for your reply @ryansolid

Two things I like to add:

The documentation is pretty clear on how this should work (unless I really don't understand it):

Renaming Index

By default, the component that is rendered for a route comes from the default export of the index.tsx file in each folder. However, this can make it difficult to find the correct index.tsx file when searching, since there will be multiple files with that name.

To avoid this, you can rename the index.tsx file to the name of the folder it is in and it will be rendered as the default export for that route:

|-- routes/                       // example.com
    |-- blog/
        |-- article-1.tsx         // example.com/blog/article-1
        |-- article-2.tsx
    |-- work/
        |-- job-1.tsx             // example.com/work/job-1
        |-- job-2.tsx
    |-- socials/
        |-- socials.tsx           // example.com/socials <== THIS DOES NOT WORK

routes/auth/auth.tsx does **not** produces /auth/auth (also 404 not found)
routes/auth/(auth).tsx gives another error: Failed to fetch dynamically imported module

I don't want to be nitpicky, just trying things out and I really would like to avoid a lot of 'index.tsx' files all over the place.

[baoxdev]

The doc https://docs.solidjs.com/solid-start/building-your-application/routing#renaming-index uses socials/socials.tsx so it should be updated? I tried socials/(socials).tsx and it works.

It also does not mention about putting the folder name in brackets.

To avoid this, you can rename the index.tsx file to the name of the folder it is in and it will be rendered as the default export for that route:

[LukaPelgrom]

I tried @baoxdev solution and it works. How to add a layout to this?

[lirc571]

routes/auth/(whatever).tsx seems to work when rendered on the server, but client side routing is failing?

---

Update: It worked after a browser hard refresh. It seems that the dev server does not automatically invalidate browser cache?