FileRoutes layout

Can anyone help me set up layouts in solidstart?

13 Replies

LukaOP•7mo 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•7mo ago

lowercase 'A'

astroxvimy•7mo ago

what is the current status?

LukaOP•7mo ago

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

REEEEE•7mo ago

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

LukaOP•7mo ago

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

REEEEE•7mo ago

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

LukaOP•7mo ago

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

REEEEE•7mo ago

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

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

I think something like this

LukaOP•7mo 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•7mo 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•6mo ago

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

peerreynders•6mo 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