eastern-cyan

I dont understand route matching.

I have the following routes

fruits.tsx
fruits.brazil.tsx
fruits.brazil.$fruitId.tsx

fruits.tsx
fruits.brazil.tsx
fruits.brazil.$fruitId.tsx

when i go to /fruits/brazil i see the page for /fruits. to make this work corectly I need to add index as a suffix to all routes without a $, which seems very counterproductive. What am I missing?

11 Replies

deep-jade•4mo ago

routes match all the subparts so if you define a route X it becomes the layout for all X.*.* routes when you add the .index you’re simply making sure it’s not the subpart of another route X.index can never be the subpart of `X.**.`

eastern-cyanOP•4mo ago

so basically I need to suffix all routes with index if they have any subroutes?

fruits.index.tsx
fruits.brazil.indextsx
fruits.brazil.$fruitId.tsx

fruits.index.tsx
fruits.brazil.indextsx
fruits.brazil.$fruitId.tsx

typical-coral•4mo ago

if you want them to be accessible without the sub path, then yes

eastern-cyanOP•4mo ago

so when would a user see the page defined in fruits.tsx ?

fruits.tsx
fruits.index.tsx
fruits.brazil.indextsx
fruits.brazil.$fruitId.tsx

fruits.tsx
fruits.index.tsx
fruits.brazil.indextsx
fruits.brazil.$fruitId.tsx

typical-coral•4mo ago

when you access /fruits

deep-jade•4mo ago

or /fruits/brazil or /fruits/brazil/nnn (?) fruits.tsx is effectively the layout of all the sub routes, isn’t it ? by adding an <Outlet/> to it

eastern-cyanOP•4mo ago

would't a layout be identified by fruits._layout.tsx

deep-jade•4mo ago

yes an no routes prefixed by _ just are parts that are ignored in the url they’re pathless routes they’re indeed commonly used for layouts but you see _x.index.tsx _x.foo.tsx _x.bar.tsx they all have the same subpart _x which is the exact same behavior as fruits.tsx in your original message

eastern-cyanOP•4mo ago

Im sorry a i feel a bit dumb.

fruits.index.tsx. // I see this when i go to /fruits
fruits.brazil.indextsx // I see this when i go to /fruits/brazil 
fruits.tsx // and this?

fruits.index.tsx. // I see this when i go to /fruits
fruits.brazil.indextsx // I see this when i go to /fruits/brazil 
fruits.tsx // and this?

deep-jade•4mo ago

if you have an <Outlet /> inside fruits.tsx it will wrap the content of the other two routes

eastern-cyanOP•4mo ago

What if I don’t? It becomes unreachable? I think i understand it now. Thank you all for you patience, i think I was bit biased by the naming convention of Solid Start.

Gaming

Programming

I dont understand route matching.

Did you find this page helpful?