#How to use layout system?

1 messages · Page 1 of 1 (latest)

sinful light
#

Hello all, i'm quite new to remix and i had a question about the layout system.
currently i'm working on my resume website and i have in the routes:

app -> routes -> index.tsx ( this is the layout specified with a outlet within it )
app -> routes -> index -> index.tsx ( this is the home page that should use the layout )
app -> routes -> index -> about.tsx (this is the about page that should use the layout )

I get an error that: child routes are not allowed in index routes. Please remove child routes of routes/app/index

Is there a way that i can achieve this without index child routes? so i can have:
https://fake-portfolio.app/home, https://fake-portfolio.app/about, etc...

Kind regards.

steep turtle
#

if you want global layout, you can put it on app/root.tsx wrapping the outlet component

as the error said, you cannot have child routes in index route

to get https://fake-portfolio.app/home

you can do redirect on routes/index.tsx so when url https://fake-portfolio.app/ it will redirect to home

import { redirect } from '@remix-run/node' // cloudflare/deno

export function loader() {
  return redirect('/home')
}

so you can have routes/home.tsx and routes/about.tsx to get what you want

You can read more here https://remix.run/docs/en/v1/guides/routing

sinful light
#

Thanks... i'm not quite a fan of redirects but else i will define a layout that accept children and pass the page in the layout manually.