FileRoutes layout

Can anyone help me set up layouts in solidstart?

11 Replies

Luka•5w 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•5w ago

lowercase 'A'

astroxvimy•5w ago

what is the current status?

Luka•5w ago

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

REEEEE•5w ago

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

Luka•5w ago

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

REEEEE•5w ago

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

Luka•5w ago

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

REEEEE•5w ago

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

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

I think something like this

Luka•5w 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•5w 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

Gaming

Programming

FileRoutes layout