Closed oluijks closed 1 month ago
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
Thank you for your reply @ryansolid
Two things I like to add:
1. 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
2.
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.
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:
I tried @baoxdev solution and it works. How to add a layout to this?
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?
Duplicates
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:
Context 🔦
No response
Your environment 🌎