making routing a bit a easier through NEXT link

[chocoscoding]

Goals

1. Adding to what you can do with
2. Making it easier to route pages especially in a server side component

Background

If i want do anything above basic routing i have to convert it to a client side component and also use a hook from next/navigation or do some server side manipulation

"use client";
import { useParams } from "next/navigation";
import Link from "next/link";
const Normal = () => {
  const params = useParams();

  //current page: http://localhost:3000/groups/1234/manage/Membership/Request
  return (
    <div>
      <p className="mb-4 text-2xl">Manage</p>
      <div className="flex gap-5">
        {/* go to page: http://localhost:3000/groups/1234/manage/Membership/Members */}
        <Link href={`/groups/${params!.id}/manage/Membership/Members`}>Membership</Link>
        {/* go to page: http://localhost:3000/groups/1234/manage/Community/Members */}
        <Link href={`/groups/${params!.id}/manage/Community/Members`}>Community</Link>
        {/* go to page: http://localhost:3000/groups/1234/manage/Content */}
        <Link href={`/groups/${params!.id}/manage/Content`}>Content</Link>
        {/* go to page: http://localhost:3000/groups/1234/Performance */}
        <Link href={`/groups/${params!.id}/manage/Performance`}>Content</Link>
        {/* go to page: http://localhost:3000/groups/1234 */}
        <Link href={`/groups/${params!.id}`}>Content</Link>
      </div>
    </div>
  );
};

export default Normal;

Proposal

what if we adopt the way of importing things from other folders.

• ./ is the same path
• ../ is a path before
• ../../ is two paths before
  and so on

import Link from "next/link";
const Suggestion = () => {
  //current page: http://localhost:3000/groups/1234/manage/Membership/Request
  return (
    <div>
      <p className="mb-4 text-2xl">Manage</p>
      <div className="flex gap-5">
      {/* go to page: http://localhost:3000/groups/1234/manage/Membership/Members */}
        <Link folderFormat={true} href={`./Members`}>Membership</Link>
      {/* go to page: http://localhost:3000/groups/1234/manage/Community/Members */}
        <Link folderFormat={true} href={`../Community/Members`}>Community</Link>
      {/* go to page: http://localhost:3000/groups/1234/manage/Content */}
        <Link folderFormat={true} href={`../Content`}>Content</Link>
      {/* go to page: http://localhost:3000/groups/1234/Performance */}
        <Link folderFormat={true} href={`../../Performance`}>Performance</Link>
      {/* go to page: http://localhost:3000/groups/1234 */}
        <Link folderFormat={true} href={`../../../`}>Go to main group page</Link>
      </div>
    </div>
  );
};

export default Suggestion;

Kindly tell me what you all think. Thanks 🌞🌞🌞🥰

[jayantrohila57]

how it will handle the duplicate URL
like ./shoe
men/shoe, women/shoe

[chocoscoding]

whats the destination route and whats the current page route in this case. Can you be a bit clearer .
Thanks 🙂

[jayantrohila57]

current is /

[chocoscoding]

then you can just use link without folderFormat props.
Like:

<Link  href={`/Shoe`}>Membership</Link>

or

<Link  href={`/men/sho`}>Membership</Link>

or

<Link  href={`/women/shoe`}>Membership</Link>

The best case would be scenarios where you have a current page like:
http://localhost:3000/clothing/men/shoes/20D23013/reviews/1023

you can do

<Link folderFormat={true}  href={`./`}>To go to all reviews</Link>
{/* go to page: http://localhost:3000/clothing/men/shoes/20D23013/reviews */}
<Link folderFormat={true}  href={`./1012`}>To go to all review 1012</Link>
{/* go to page: http://localhost:3000/clothing/men/shoes/20D23013/reviews/1012 */}
<Link folderFormat={true}  href={`../`}>To go to the product page/Link>
{/* go to page: http://localhost:3000/clothing/men/shoes/20D23013 */}
<Link folderFormat={true}  href={`../variants`}>To see other variants of the same product</Link>
{/* go to page: http://localhost:3000/clothing/men/shoes/20D23013/variants */}
<Link folderFormat={true}  href={`../../`}>To see all shoes</Link>
{/* go to page: http://localhost:3000/clothing/men/shoes*/}

does this explain better 🙂

[chocoscoding]

So basically treat every / as a folder.

./ --- i want to replace something in this path/folder

../ ---- i want to replace something in the parent path/folder above the last path/folder

../../ ---- i want to replace something 2 paths/parents above the last path/folder

../../../ ---- i want to replace something 3 paths/parents above the last path/folder

I hope this helps 🙂 👍