SolidJS•2mo ago

Renaming Index not working?

Hi! I just created a project with SolidStart starter and chose the tailwind with typescript template. I created a socials folder with a socials.tsx component (should render on /socials according to the docs (https://docs.solidjs.com/solid-start/building-your-application/routing#renaming-index) but it only renders under /socials/socials. The function that I'm exporting from socials.tsx looks like this:

export default function Index() {
  return <h1>test</h1>;
}

export default function Index() {
  return <h1>test</h1>;
}

I also tried renaming the function to Socials but didn't work, what am I missing? 🤔

7 Replies

Tommypop•2mo ago

You should rename socials.tsx to index.tsx I think Because an index.tsx file in a folder is used by the router as the route for that path If the filename isn't index.tsx, then the filename is used as the route suffix

valerio.tsx•2mo ago

yes, that works. But according to the docs:

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

Tommypop•2mo ago

Hmm, that might be a mistake in the docs. You should be able to bracket the put brackets round the name, (socials.tsx), if you don't want it named index

valerio.tsx•2mo ago

Yess, that works, thanks! You think I should open an issue on the solid-docs repo?

Luka•2mo ago

this doesnt work for me for me socials/index.ts only works did you get the layouts working?

Luka•2mo ago

Related github issue: https://github.com/solidjs/solid-start/issues/1510

GitHub

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

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 b...

Luka•2mo ago

I found two working options: Option 1: /socials/(anything_you_want).tsx works Options 2: If there is a file named index, this will take priority, i.e. /socials/index.tsx. Isn't option 1 supposed to be the layout feature? How to add a layout on socials and the children with option 1?

Gaming

Programming

Renaming Index not working?