Question 247851 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to know if a slug belongs to a page in Nextjs 13

I am trying to make a dynamic breadcrumb component with custom values in Nextjs 13.

Let’s say I have the route: /dashboard/[tenant]/[invoice]/editor/abcd.

Currently, I do an API call and populate [tenant] and [invoice] with custom names in my Breadcrumb component; E.g the name of the tenant and document instead of the id’s.

Now I would like to render a link for [invoice] and ‘editor’ and ‘abcd’ which are all pages, except for [tenant].

How can I distinct between a slug that is a page and a slug that isn’t a page?

I know for example that ‘abcd’ is a page because it is the end of the url. But I would not know that for ‘editor’.

I tried using the useParams hook but that only returns the values in the URL of course.

Tags:

2

Answers


  1. 0

    You can create a page as /dashboard/invoice/[invoice]/ and populate the page with the invoice details.

    Change your editor call to /dashboard/editor/[tenant]/[invoice]

    Alternatively, if you insist on your paths, you can name your tenants and invoice with specific string e.g. tenant-1234, invoice-1234, then in /dashboard/[pid], you can check your pid for the tenant or invoice string and generate the associated component. Though, that’s more work than necessary.

    Login or Signup to reply.
  2. 0

    In Next.js 13, you can use the useRouter hook to get information about the current route, including the path and query parameters. To determine if a part of the slug corresponds to a page, you can compare it against your known routes. Here’s how you can do it:

    1. Import the useRouter hook from next/router:
    import { useRouter } from 'next/router';
    1. Define an array of known routes in your component or a separate configuration file. This array should contain the parts of the slug that correspond to pages:
    const knownRoutes = ['editor', 'abcd'];
    1. Use the useRouter hook to get information about the current route, and then extract the slug from it. You can split the slug into its parts using the / delimiter:
    const { asPath } = useRouter();
const slugParts = asPath.split('/').filter(Boolean); // filter out empty strings
    1. Check if each part of the slug is a known route or not. If it’s a known route, you can render a link; otherwise, you can just display the text:
    return (
  <div>
    {slugParts.map((part, index) => {
      if (knownRoutes.includes(part)) {
        // Render a link for known routes
        return (
          <Link key={index} href={asPath.split(part)[0] + part}>
            <a>{part}</a>
          </Link>
        );
      } else {
        // Display text for other parts of the slug
        return <span key={index}>{part}</span>;
      }
    })}
  </div>
);

    In the code above, we split the slug into its parts, iterate through them, and check if each part is in the knownRoutes array. If it is, we render a link for that part; otherwise, we display it as text. This way, you can distinguish between slugs that correspond to pages and those that don’t.

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

Back To Top
Search