FileRoutes layout

Can anyone help me set up layouts in solidstart?

13 Replies

LukaOP•6mo ago

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

REEEEE•6mo ago

lowercase 'A'

astroxvimy•6mo ago

what is the current status?

LukaOP•6mo ago

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

REEEEE•6mo ago

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

LukaOP•6mo ago

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

REEEEE•6mo ago

your layout files with () should be lowercase I think they have to match the same name as the folder

LukaOP•6mo ago

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

REEEEE•6mo ago

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

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

I think something like this

LukaOP•6mo ago

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 @REEEEE

peerreynders•6mo ago

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

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

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>

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

Nesting Routes

Deniz•5mo ago

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

peerreynders•5mo ago

Route components get RouteSectionProps Components that are layouts naturally require ParentProps

GitHub

solid-router/src/types.ts at 098a7947ae24f85d05bde76bf26d5c803ae90a...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

GitHub

solid/packages/solid/src/render/component.ts at 1afe035c80f0dc28159...

A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid

Gaming

Programming

FileRoutes layout