How to create a nested page?

Get Help and Help Others
7

Nice to meet you Anton - happy Thanksgiving to you as well,

Short answer: You can nest pages and types will be generated that match.

You’ll just need to run yarn rw g types once you’ve relocated them.

Here I’m doing just that, nesting UserPage in /admin/user:

Just a note: I’m electing to divide my pages by service - so my generated types look a bit weird.
If you use the structure described in your original post, it’ll generate more friendly names.

image

Which results in the following being generated:

// .redwood/types/includes/web-routesPages.d.ts

import AdminUserUserPageType from 'my-app/web/src/pages/Admin/User/UserPage/UserPage'
import AdminUserUsersPageType from 'my-app/web/src/pages/Admin/User/UsersPage/UsersPage'

declare global {
  const AdminUserUserPage: typeof AdminUserUserPageType
  const AdminUserUsersPage: typeof AdminUserUsersPageType
}

Which I’m free to use in Routes.tsx, without breaking Redwood’s importing.

You can also see the weirdness I talked about - I have to reference my pages as AdminUserUserPage and AdminUserUsersPage. If the /user directory didn’t exist, I wouldn’t have to.

<>
// ...
<Set private role="admin" unauthenticated="home">
  <Route path="/admin/users/{id}" page={AdminUserUserPage} name="adminUser" />
  <Route path="/admin/users" page={AdminUserUsersPage} name="adminUsers" />
</Set>
// ...
</>

And then naming the route "adminUser" was a personal preference.

Hope it helps!

1 Like