FileRoutes layout

[covert belfry]

Can anyone help me set up layouts in solidstart?

When user navigates to notifications I want them to see a sidebar meaning Account component and as a props.children I want to have Notifications component

[old crystal]

lowercase 'A'

[valid abyss]

what is the current status?

[covert belfry]

Its the same

Is there any component that I should import from solid like <Outlet> that react-router-dom has?

[old crystal]

There used to be Outlet but it was removed in favor of props.children

[covert belfry]

OK could You look at the file structure I might have problems there

[old crystal]

your layout files with () should be lowercase I think

they have to match the same name as the folder

[covert belfry]

I can't make it work do you have an example?

or documentation about it

[old crystal]

(account)/
  (notifications)/
    index.tsx
  (notifications).tsx
(account).tsx

I think something like this

[covert belfry]

I just wrapped the notification component code into the Account component and it works but I don't really know if this is recommended, as long as it works lol.

Thanks @old crystal

[half pumice]

In case it wasn't clear from the previous example

src/routes/account.tsx       # layout for /account
src/routes/account/index.tsx # default nested child content for /account

If you need to be more specifc

src/routes/account.tsx                 # layout for /account
src/routes/account/(notifications).tsx # default nested child content for /account

Renaming Index
Nested Layout

Some people expect the layout to be collocated with the nested content similar to what Next.js chose to do with their layout.ts & page.ts.

SolidStart on the other hand chose to mirror the route component structure, e.g.

<Router>
  <Route path="/account" component={Account}>
    <Route path="/" component={Notifications} />
  </Route>
</Router>

Nesting Routes

[gilded flax]

for tsx, what is the correct type for the props of the layout?