Is there a way to get a previous dynamic route in app directory?

Take this for example

app
  - site
    - [slug]
      - map 
        - page.tsx // how to get [slug] param
      - map-settings 
        - page.tsx // how to get [slug] param
   // ... and so on

app
  - site
    - [slug]
      - map 
        - page.tsx // how to get [slug] param
      - map-settings 
        - page.tsx // how to get [slug] param
   // ... and so on

How can I extract the previous dynamic url param into the nested site? is it possible?

app
  - site
    - [...slug]
      - page.tsx

app
  - site
    - [...slug]
      - page.tsx

Could I do something like this? Where I'm kinda breaking the catch all, but I only want it to catch all up to a certain point? This seems a bit hacky

import { Map } from "@/components/map";
import { redirect } from "next/navigation";
import { cookies } from "next/headers";

import NotFound from "./not-found";
import SiteSettings from "./site-settings";

type MapPageProps = {
  params: {
    slug: Array<string>;
  };
};

const MapPage = async ({ params: { slug } }: MapPageProps) => {
  const cookie = cookies();
  const token = cookie.get("token")?.value;
  
  if (!token) return redirect("/login");

  if (slug.length === 1) return <NotFound />;

  const [site, route] = slug;

  switch (route) {
    case "map":
    case "map-settings":
      return (
        <div className="flex h-full flex-1 overflow-hidden">
          <Map site={site} settings={route === "map" ? false : true} />
        </div>
      );
    case "site-settings":
      return <SiteSettings />;

    default:
      return <NotFound />;
  }
};

export default MapPage;

import { Map } from "@/components/map";
import { redirect } from "next/navigation";
import { cookies } from "next/headers";

import NotFound from "./not-found";
import SiteSettings from "./site-settings";

type MapPageProps = {
  params: {
    slug: Array<string>;
  };
};

const MapPage = async ({ params: { slug } }: MapPageProps) => {
  const cookie = cookies();
  const token = cookie.get("token")?.value;
  
  if (!token) return redirect("/login");

  if (slug.length === 1) return <NotFound />;

  const [site, route] = slug;

  switch (route) {
    case "map":
    case "map-settings":
      return (
        <div className="flex h-full flex-1 overflow-hidden">
          <Map site={site} settings={route === "map" ? false : true} />
        </div>
      );
    case "site-settings":
      return <SiteSettings />;

    default:
      return <NotFound />;
  }
};

export default MapPage;

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Is there a way to get a previous dynamic route in app directory?