Next.js Discord

Discord Forum

Routing: I want my URL to chain parameters based on user interaction

Answered
Munchkin posted this in #help-forum
Open in Discord
MunchkinOP
I am using Next.js 14. I want clients to book appointments with vendors. first choose the branch, then 1 or more service, then a staff member, then date and time, then checkout.
- my directory is as follows:
- src
- app
- booking
- layout.tsx
- page.tsx
- [...slug]
- page.tsx
-all pages that the user will select from share one layout
-in "src/app/booking/page.tsx " I am calling <ChooseBooking /> which prompts the user to choose a branch
- after branch is chosen I want to call the rest of my components:
<Services /> <Staff /> <Date />
- I want my URL to be:
<subdomain-name>.example.com/<branch-id OR branch-name>/<service-name OR id>&<rest of selected services names or Id>/<staff-name OR id>

I don't know how to chain this url as the user goes through their selection.

- What I came up with is to call the components dynamically in "src/app/booking/[...slug]/page,tsx" but that doesn't work 
const DynamicPage = () => {
  const [searchParams] = useSearchParams();
  const slug = searchParams.get('slug');
  if (slug && slug.length === 1) {
    return <ChooseBranch />;
  } else if (slug && slug.length === 2) {
    return <BookingServices />;
  } else if (slug && slug.length === 3) {
    return <StaffSelection />;
  }
  return <p>Invalid URL</p>;
};

The code above returns <p>Invalid URL</p>
I have also removed "/booking/page,tsx" and added <ChooseBooking /> as slug 0 in "/booking/[...slug]/page,tsx", which didn't work. 
const DynamicPage = () => {
  const [searchParams] = useSearchParams();
  const slug = searchParams.get('slug') || ""; // Handle empty slug
  if (slug.length === 0) {
    return <ChooseBranch />; // Render ChooseBranch for base URL
  } else if (slug.length === 1) {
    return <BookingServices />;
  } else if (slug.length === 2) {
    return <StaffSelection />;
  }
  return <p>Invalid URL</p>;
};

this returned 404 page not found
Any help is appreciated. Thank you.
Answered by nahuelluca
Hey, i think you have 1 error. I think the error is use useSearchParams in React server component in this you don't use hooks or client things

yo can do something like this:
const DynamicPage = ({ params }: { params: { slug: string } }) => {
  const slug = params.slug;
  if (slug && slug.length === 1) {
    return <ChooseBranch />;
  } else if (slug && slug.length === 2) {
    return <BookingServices />;
  } else if (slug && slug.length === 3) {
    return <StaffSelection />;
  }
  return <p>Invalid URL</p>;
};


let my know if this is useful for you
View full answer

2 Replies

nahuelluca
Hey, i think you have 1 error. I think the error is use useSearchParams in React server component in this you don't use hooks or client things

yo can do something like this:
const DynamicPage = ({ params }: { params: { slug: string } }) => {
  const slug = params.slug;
  if (slug && slug.length === 1) {
    return <ChooseBranch />;
  } else if (slug && slug.length === 2) {
    return <BookingServices />;
  } else if (slug && slug.length === 3) {
    return <StaffSelection />;
  }
  return <p>Invalid URL</p>;
};


let my know if this is useful for you
Answer