Hello,
When I use the routerLink prop on an IonCard with two IonButton and when the buttons are clicked the onClick callback is used as expected, but the page navigates forward; this is not the desired behavior.
How can I do this properly? I want to have two buttons that do not navigate to the routerLink page.
- IonCard that navigates to a new page when clicked.
- IonCard has a IonButton that does not navigate to page when clicked.
import { PostView } from "lemmy-js-client";
import {
IonButton,
IonCard,
IonCardContent,
IonCardHeader,
IonCardTitle,
IonCol,
IonGrid,
IonIcon,
IonImg,
IonRow,
IonText,
} from "@ionic/react";
import { arrowUpCircleOutline, chatboxOutline } from "ionicons/icons";
import styled from "@emotion/styled";
const Container = styled.div`
margin: 0 0 16px;
width: 100%;
align-content: center;
`;
export default function PostFeedCardItem(props: { post: PostView }) {
const handlePostClick = () => {
console.log("Card clicked!");
};
const post = props.post;
return (
<IonCard routerLink={`/page/PostPage/${post.post.id}`}>
<IonCardHeader>
<IonCardTitle>{post.post.name}</IonCardTitle>
</IonCardHeader>
<IonCardContent>
{post.community.name}
<IonImg src={post.post.thumbnail_url}></IonImg>
</IonCardContent>
<IonGrid>
<IonRow>
<IonCol>
<Container>
<IonIcon icon={arrowUpCircleOutline} size="medium"></IonIcon>
<IonText color="secondary">{post.counts.upvotes}</IonText>
</Container>
</IonCol>
<IonCol>
<IonIcon icon={chatboxOutline} size="medium"></IonIcon>
<IonText color="secondary">
<h2>{post.counts.comments}</h2>
</IonText>
</IonCol>
<IonCol>
<IonButton fill="clear" onClick={handlePostClick}>
Upvote
</IonButton>
</IonCol>
<IonCol>
<IonButton fill="clear">Downvote</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</IonCard>
);
}