Link components in Next.js now automatically add the current path when working with nested dynamic routes, making it

Question

Link components in Next.js now automatically add the current path when working with nested dynamic routes, making it

How can I effectively handle nested dynamic routes and utilize the Next.js Link component?

Let's say I have 2 different file paths:

/pages/projects/index.js

<Link href={`/projects/${project.id}`} key={index}>
  <a>Project Name</a>
</Link>

Clicking on this will lead me to localhost:3000/projects/some-id/

and

/pages/projects/[pid]/index.js

I am struggling to understand how to add the path prefix of localhost:3000/projects/some-id/

<Link href={`/${router.pathname}/apple`}>
  <a>Business name</a>
</Link>

When using router.pathname, I get /projects/[pid]/apple, without the domain, and if I use router.asPath, I get the correct path but still without the domain. I'm not sure if adding the domain name directly into Link's href is the right approach.

javascript react-router next.js router

Answer 1

Answer №1

Creating a nested dynamic route in Next.js

https://i.sstatic.net/Sup0Y.png

To begin, set up a basic link in your index.js file

import Link from 'next/link';

export default function Index() {
  return (
    <section>
      <h2>Index</h2>
      <Link href="/projectA">
        <a>Project A</a>
      </Link>
    </section>
  );
}

In the [projectId].js file, utilize the useRouter hook to access the current parameter and add it to your next route

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function Project() {
  const router = useRouter();
  const { projectId } = router.query;
  return (
    <section>
      <Link href={`/${projectId}/2`}>
        <a>Project 2</a>
      </Link>
    </section>
  );
}

See a working example here

Answer 2

Creating a nested dynamic route in Next.js

https://i.sstatic.net/Sup0Y.png

To begin, set up a basic link in your index.js file

import Link from 'next/link';

export default function Index() {
  return (
    <section>
      <h2>Index</h2>
      <Link href="/projectA">
        <a>Project A</a>
      </Link>
    </section>
  );
}

In the [projectId].js file, utilize the useRouter hook to access the current parameter and add it to your next route

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function Project() {
  const router = useRouter();
  const { projectId } = router.query;
  return (
    <section>
      <Link href={`/${projectId}/2`}>
        <a>Project 2</a>
      </Link>
    </section>
  );
}

See a working example here

Link components in Next.js now automatically add the current path when working with nested dynamic routes, making it

Answer №1

Creating a nested dynamic route in Next.js

Similar questions

Struggling with incorporating GlobalStyles in the app.tsx file

In Vue.js, the properties of components are not defined

Passing parameters from a parent component to a child component and then back to the parent component

Customizing translations for various domains in Vue-i18n

Ways to navigate to a different page in React when a user clicks?

What is the best way to verify that a check should have various attributes using chai-things?

What is the process for generating a three-dimensional surface using 3D points in Three.js?

The pictures are not appearing on the production version of Next JS without any clear explanation

Tips for horizontally arranging a list with a flexible number of columns

Verify that each interface in an array includes all of its respective fields - Angular 8

Generate a fresh FileReader instance using the downloaded file via XmlHTTPRequest

Is there another way to implement this method without having to convert snapshotChanges() into a promise?

I keep getting a 404 error when trying to use Internationalization (i18n) Routing

Disappearances of sliding jQuery divs

Checking for a nonce in OIDC custom provider authentication for NextAuth

What is the best way to send an object key/value pair to a Vue template?

Navigating between routes with React-router v4: A beginner's guide

What steps can be taken to address the issue of the body-parser module being disabled in a node

React: Struggling to retrieve the current inputbox event value

Issues with retrieving JSON data from Google Books API object