How to route `products/[id]/settings` in Solidstart?

trying to achieve example.com/products/1/settings

|--routes/          // example.com
   |--products/
       |--[id].tsx       // example.com/products/1
       |--[id]/
         |--settings.tsx  // example.com/products/1/settings

|--routes/          // example.com
   |--products/
       |--[id].tsx       // example.com/products/1
       |--[id]/
         |--settings.tsx  // example.com/products/1/settings

9 Replies

Brendonovich•6mo ago

is settings supposed to be inside [id]/?

Root:3000OP•6mo ago

yes

Brendonovich•6mo ago

that should work, try removing node_modules/.vinxi and restarting the dev server

Root:3000OP•6mo ago

let me try

peerreynders•6mo ago

|-- routes/          // example.com
   |-- products/
       |--[id]/
         |--index.tsx    // example.com/products/1
         |--settings.tsx  // example.com/products/1/settings

|-- routes/          // example.com
   |-- products/
       |--[id]/
         |--index.tsx    // example.com/products/1
         |--settings.tsx  // example.com/products/1/settings

Root:3000OP•6mo ago

let me try 👍

Brendonovich•6mo ago

ah i was just looking at the settings part

Root:3000OP•6mo ago

Thank you so much for your time. Btw vinxi has some major hydration related bugs related auto refreshing the route logic after things change

peerreynders•6mo ago

https://github.com/solidjs/solid-start/issues/1473 How I remember how FS routing works:

<Router root='src/routes/index.tsx'>
  <Route path="/product/:id" component='src/routes/product/[id].tsx'>
    <Router path="/" component='src/routes/product/[id]/index.tsx' />
    <Router path="/settings" component='src/routes/product/[id]/settings.tsx'/>
  </Route>
</Router>

<Router root='src/routes/index.tsx'>
  <Route path="/product/:id" component='src/routes/product/[id].tsx'>
    <Router path="/" component='src/routes/product/[id]/index.tsx' />
    <Router path="/settings" component='src/routes/product/[id]/settings.tsx'/>
  </Route>
</Router>

… it explains why a layout appears at the level above the nested routes.

GitHub

[Bug?]:Error: Hydration Mismatch. Unable to find DOM nodes for hydr...

Duplicates I have searched the existing issues Latest version I have tested the latest version Current behavior 😯 Whenever i create a route with folders like routes/admin/dash.tsx this error happen...

Gaming

Programming

How to route `products/[id]/settings` in Solidstart?