Confused About Nested Routes

[knpwrs]

With the following file structure:

routes
├── [...404].tsx
├── foo
│   └── index.tsx
└── index.tsx

1 directory, 3 files

And the following contents for routes/index.tsx:

import { Outlet } from "solid-start";

export default function Home() {
  return (
    <main>
      <p>Root</p>
      <Outlet />
    </main>
  );
}

and routes/foo/index.tsx:

import { Outlet } from "solid-start";

export default function Home() {
  return (
    <main>
      <p>Foo</p>
      <Outlet />
    </main>
  );
}

I was expecting visiting http://localhost:3000/foo to have two paragraphs, one saying root followed by another saying foo. What I'm finding, however, is that / only shows root (expected) and /foo only shows foo (not expected).

After reading the nested routes documentation I tried the following file structure:

src/routes
├── [...404].tsx
├── index
│   ├── auth
│   │   └── login.tsx
│   └── auth.tsx
└── index.tsx

2 directories, 4 files

Both index.tsx and auth.tsx are essentially:

import { Outlet } from 'sold-start';

export default function ComponentName() { // Either Index or Auth
  return <Outlet />
}

And login.tsx is simply:

export default function Login() {
  return <h2>Login!</h2>
}

I've tried other various file and folder layouts but I can't seem to get nested routing to work, and all of the example projects only go one route deep as far as I can tell.

I also commented on this older issue: https://github.com/solidjs/solid-start/issues/107#issuecomment-1313086232

[emilbonnek]

You need to name your component file the same as the route you are matching. So in the first example you can rename index.tsx to foo.tsx. Then it should render as you expect when you are on the /foo route (both paragraphs). However it won't render as you expect on the / route.

For the second example I am not sure what you are looking to do, but I think naming the folder index is not gonna be interpreteted as you expect. If you are looking to just make a folder that doesn't become a route segment but lets you insert a component there you just need to make a folder name with parentheses. I have made a folder called (app) and instead of index.tsx I have (app).tsx and nested routing works nicely as I expect.

Hope it helps.

[knpwrs]

Ultimately what I was trying to achieve is a series of routes like /, /foo, and /foo/bar, and have the route at / act as the layout for /foo, /foo/bar, and everything else under /. After playing around with it a bit more, I managed to achieve this with the following file structure:

src/routes
├── [...index]
│   ├── foo
│   │   └── bar.tsx
│   └── foo.tsx
└── [...index].tsx

2 directories, 3 files

Is that the idiomatic way to accomplish what I'm describing?

[knpwrs]

I can also see some new docs that have been pushed to the repo but not published to the website yet. The following also seems to achieve what I'm after:

src/routes
├── (home)
│   ├── foo
│   │   └── bar
│   │       └── (bar).tsx
│   └── foo.tsx
└── (home).tsx

3 directories, 3 files

[roalmeida]

You have to declare the route that is used as the layout in the Root.tsx file. In my tests it didn't work using only the route file structure

<Route path='/home' compoment={<HomeLayout />}>  // home.tsx
  <Route path='/home/foo' compoment={<Foo/> }/> // home/foo.tsx
</Route>

[emilbonnek]

I can also see some new docs that have been pushed to the repo but not published to the website yet. The following also seems to achieve what I'm after:

src/routes
├── (home)
│   ├── foo
│   │   └── bar
│   │       └── (bar).tsx
│   └── foo.tsx
└── (home).tsx

3 directories, 3 files

@knpwrs yep, this is also what I was trying to say above too actually. I just do the same with (app).tsx and an (app) folder.. I consider this to be the most idiomatic way of doing it. The (home).tsx file becomes a 'layout' component for everything inside the (home) directory.

[knpwrs]

Ah, okay! Thank you! I think I grok the way rooting with now.

[JohnCido]

Rename my index.tsx and index folder to (app) did solve the problem. But I think this should be added to the document site too? Since many websites do have a shared layout across all pages (e.g. shared header and footer).