Layout issue with route groups
Unanswered
Giant panda posted this in #help-forum
Giant pandaOP
i have question guys about layout in the route groups, i have (slug) and in it [...slug] folder that have page.tsx that renders dynamic category or subcategory or article i want to make unique layout for (category) route group, i have in that folder page.tsx and layout.tsx somehow the layout.tsx not working in the (category) folder only works when i add layout.tsx in my [..slug] folder, does anyone have solution for this?
10 Replies
sorry I can't understand what problem you've encountered, can you show a screenshot of your file structure?
Giant pandaOP
(pages)
(slug)
[..slug]
page.tsx
in the (pages)
i have
another folder of category
(category)
page.tsx
layout.tsx
in the slug page.sx i am rendering components dynamically depends on the route
code example:
if (category && subCategory && articleID) {
return <Article articleID={articleID} />;
} else if (category && subCategory) {
return <SubCategory />;
} else if (category && articleID) {
return <Article articleID={articleID} />;
} else if (category) {
return <Category />;
} else {
return notFound();
}
I want to have unique layout for my category but somehow the layout.tsx working only in the slug folder and not in the category folder
(slug)
[..slug]
page.tsx
in the (pages)
i have
another folder of category
(category)
page.tsx
layout.tsx
in the slug page.sx i am rendering components dynamically depends on the route
code example:
if (category && subCategory && articleID) {
return <Article articleID={articleID} />;
} else if (category && subCategory) {
return <SubCategory />;
} else if (category && articleID) {
return <Article articleID={articleID} />;
} else if (category) {
return <Category />;
} else {
return notFound();
}
I want to have unique layout for my category but somehow the layout.tsx working only in the slug folder and not in the category folder
here's a problem, isn't
Route groups won't affect the actual URL of a page, which means they are conflicted together
(category)/page.tsx and (home)/page.tsx share the same route? Route groups won't affect the actual URL of a page, which means they are conflicted together
I guess you're trying to do:
For the layouts, you can split it into multiple folders like:
/[category]/[sub_category]/[article], where every dynamic route has its own unique layout.For the layouts, you can split it into multiple folders like:
/[category]/(category)/layout.tsx and /[category]/[sub_category]/(sub_category)/layout.tsxroute groups should be used under the dynamic segment
@fuma I guess you're trying to do: `/[category]/[sub_category]/[article]`, where every dynamic route has its own unique layout.
For the layouts, you can split it into multiple folders like: `/[category]/(category)/layout.tsx` and `/[category]/[sub_category]/(sub_category)/layout.tsx`
Giant pandaOP
now layout works in category, but the validation i am making in my slug that is category valid not working now because the [category] is dynamic route, should i move my category validation to the [category] page.tsx? or my approach from the begging wasn't right that i am using slug, i made this approach because i don't want to add a lot of folders of [category][subcategory][article-id], [category][article-id] and every page expect of article have the same layout, is my approach and code hierarchy is right?
people usually do that because they're using a remote CMS like Sanity, if you don't need that, just create a folder directly.
But why do you need validation? just invoke
But why do you need validation? just invoke
notFound() if such a page doesn't exist, or use a middleware to do so@fuma people usually do that because they're using a remote CMS like Sanity, if you don't need that, just create a folder directly.
But why do you need validation? just invoke `notFound()` if such a page doesn't exist, or use a middleware to do so
Giant pandaOP
i am using cms, the validation is just array of categories names that i check if the category name is exist in the array if not i am invoking the notFound(), about the middleware approach you mean to check which route is at the moment and render is layout? instead of using folder structure?
@Giant panda i am using cms, the validation is just array of categories names that i check if the category name is exist in the array if not i am invoking the notFound(), about the middleware approach you mean to check which route is at the moment and render is layout? instead of using folder structure?
You shouldn't check the parameters in that way, only return not found if that page doesn't exist
what is that... Since you are using a CMS, just do the following:
const page = await getPage(params.slugs) // something provided by your CMS
if (page == null) notFound();
return <MDXPage>...</MDXPage>; // render the page