Match view.
Answered
Black carp posted this in #help-forum

Black carpOP
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:
Then if the user clicks the card, he will be redirected to a dynamic route like
Inside the dynamic page you accept the param like:
From here you just need to display your data on your page
<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
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?

1. you can either wrap your whole card into a
2. you can handle the
Link
component or2. 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
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.

you do it like this:
Then if the user clicks the card, he will be redirected to a dynamic route like
Inside the dynamic page you accept the param like:
From here you just need to display your data on your page
<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
Answer

@Black carp what exactly is slug?

The id. If you folder is called
[id]
, then you can access the id
propnah, it's just the part after the
/
from /details/ <--- here

Black carpOP
I see
Thanks

happy to help