Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Route structure and layouts problem in Next.js

I have a web-app I want to implement something like this, I already have Navbar(Header) and footer components.

desired result

How would my file structure look like, not sure if i should use grouping because it doesn’t solve it.

I tried route grouping but as a beginner I do not know how to go about solving this

Tags:

2

Answers


  1. 0

    You can use slot as one of the comments above suggested but if you don’t want to do that, I have two other solutions for you.

    1. Route Grouping – Route grouping can actually work you because in each route group, you can define a layout which all the routes in that group will use. Each route group can have a layout defined as layout.tsx, this is your easiest solution.

    2. You can create the Header and Footer components and import them separately on each route you want to use. This is also easy too but not smart idea.

    Login or Signup to reply.
  2. 0

    Adding a Header and Footer in a Wrapper Layer-like layout. tsof a grouped route does not seem to be a good idea since you don’t need a header in a sub-route like app/create/step1.

    It is better to create an array of routes in which you want to show the Header and Footer.

    const HEADER_REQD_ROUTES = ["/app", "/app/overview", "/app/create", "/login", "/"];
const FOOTER_REQD_ROUTES = ["/", "/login];

    Now In you Header and Footer component, Render these component only if current route is included the above arrays.

    {HEADER_REQD_ROUTES.includes(currentPathname) && <Header/>}
{FOOTER_REQD_ROUTES.includes(currentPathname) && <Footer/>}

    You can get the pathname form next/navigation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search