NextJS: Problem related to nested dynamic routing (/category/[label]/subcategory/[id])

user_7246174 0
Viewed 218

enter image description here

Category Path

http://localhost:3000/category/Municipality

When selecting a category [label] and then selecting the subcategory [id], I am losing the value [label] in the path, and it only shows me the following path:

http://localhost:3000/category/subcategory/44

Nextjs allows me to display the subcategory information without problems, but the path it is taking is not correct.

I want the path to be like this:

http://localhost:3000/category/Municipality/subcategory/44

Code: Example


  const path = `/category/subcategory/${directory?.id}`; // ??

  return (
    <List.Item key={directory.id}>
      <Skeleton avatar title={false} loading={isLoading} active>
        <Card cover={<Image src={`${config.SERVER_URL}${thumbnail?.attributes?.formats?.large?.url}`} />} style={{ width: 300 }} loading={isLoading}>
          <Meta
            title={<Link href={path}>{title}</Link>} // path to view subcategory information
            description={description}
          />
        </Card>

      </Skeleton>
    </List.Item>
  );
}
next.js url-routing
1 Answers

You need to change the folder structure a little bit and make it like the following:

  • pages
    • category
      • [label] <-- this is a folder
        • subcategory
          • [id].tsx
        • index.tsx

Here is the link to the working example

Also in your code example, the path variable looks incorrect. I believe it should be something like that

const path = `/category/${category.label}/subcategory/${directory?.id}`;
user_39366020
Related