Match view.

Answered

Black carp posted this in #help-forum

Black carpOP

2025-02-04T15:14:30.395Z

I have all of these match cards, and whenever you click on one of them I want to redirect the user to a website with a more detailed overview of the match. How do I do that? What do I use?

Answered by B33fb0n3

you do it like this:

<Link href={"/details/" + id}>
  <MyBeautifulCard />
</Link>

Then if the user clicks the card, he will be redirected to a dynamic route like https://example.de/details/12345.

Inside the dynamic page you accept the param like:

export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const id= (await params).id
  const detailsData = await getDetails(id); // And fetch your data
  return <div>My Post: {slug}</div>
}

From here you just need to display your data on your page

View full answer

9 Replies

@Black carp I have all of these match cards, and whenever you click on one of them I want to redirect the user to a website with a more detailed overview of the match. How do I do that? What do I use?

B33fb0n3

2025-02-04T15:17:12.361Z

1. you can either wrap your whole card into a Link component or
2. you can handle the onClick event on the card and use the router.push(/new/path/) method to redirect the user to the expected path

@B33fb0n3 1. you can either wrap your whole card into a Link component or 2. you can handle the `onClick` event on the card and use the `router.push(/new/path/)` method to redirect the user to the expected path

Black carpOP

2025-02-04T15:22:43.666Z

Were I to use the

Link

component, how would I go about it? How do I send over the match data?. The thing is I don't know how to handle the subsite, since I want it to be dynamic, not just a hardcoded .tsx file.

@Black carp Were I to use the Link component, how would I go about it? How do I send over the match data?. The thing is I don't know how to handle the subsite, since I want it to be dynamic, not just a hardcoded .tsx file.

B33fb0n3

2025-02-04T15:25:31.930Z

you do it like this:

<Link href={"/details/" + id}>
  <MyBeautifulCard />
</Link>

Then if the user clicks the card, he will be redirected to a dynamic route like https://example.de/details/12345.

Inside the dynamic page you accept the param like:

export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const id= (await params).id
  const detailsData = await getDetails(id); // And fetch your data
  return <div>My Post: {slug}</div>
}