#how to implement nested pages?

15 messages · Page 1 of 1 (latest)

royal tendon
#

This is what my directory for pages lookes like

├───pages
│   ├───api
│   ├───auth
│   │   └───register
│   ├───countries
│   ├───favourites
│   ├───gender
│   ├───performer-category
│   ├───performers
│   └───profile
│       ├───messages
│       └───settings```

When I navigate to `profile/settings`, I want to display the page in the *settings* folder. Same for the *messages* folder. In both those folders, I have an *index.jsx* file. Every page in the app uses a layout, which I import from the components and use in the `_app.js` like so ```js

function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page);
  return (
    <ContextProvider>
      <Layout>{getLayout(<Component {...pageProps} />)}</Layout>{" "}
    </ContextProvider>
  );
}

export default MyApp;```

And I have a layout for the profile page: ```jsx
function Layout({ children }) {
  return (
    <div className="grid grid-cols-8 gap-4">
      <aside className="col-span-2 bg-menuBg2 rounded-lg">
        <NavLink href="/settings">
          <a className="text-blue-600">Account Settings</a>
        </NavLink>
        <NavLink href="messages">
          <a className="text-red-600">Messages</a>
        </NavLink>
      </aside>
      <div className="col-span-6">{children}</div>
    </div>
  );
}

export default Layout;

And every page in the profile folder will use this layout. In the index.jsx of the profile page I did this ```jsx
Profile.getLayout = function getLayout(page) {
return <ProfileLayout>{page}</ProfileLayout>;
};

The `aside` element in the profile layout should display on all pages.
I want to be able to navigate to `/profile/*` and match all the pages(folders)
But I do not know how to do it.
static bramble
royal tendon
#

oh

#

But how could I implement this now?

#

could it be possible with [...all].js ??

#

ow

#

I just create an app folder alongside my pages folder.

royal tendon
#

it doesn't work

shy coral
#

@royal tendon let me see if I got this correctly, you will need to change the href on the Layout, so the NabLink will land on the correct page

royal tendon
#

I tried navigating manually

#

but that didn't work

#

href='settings' and href='/messages' would give the same result

#

profile/settings gave ndefined

royal tendon
#

I have a different approach

#

and that is checking in the router query on which path it is