Link not working for mapped components nextjs-CodePudding

I have this code which i have to use in several places and so i have extracted it as a component. The problem is that in one place i have to use it with a link wrapped around it and one place i don't need the link. What i am doing is when i am mapping the components i am wrapping a link around the component but it is not working. Is ther a way i can achieve this?

Post.tsx

const Post: React.FC<PropsType>=({
  id,
  timestamp,
  tweet,
  name,
  image,
  creatorId,
  currUserId,
  likedBy,
  retweetedBy
}) => {
  return (
    <Link  href={`post/${id}`}>
      <PostContent id={id}
      timestamp={timestamp}
      tweet={tweet}
      name={name}
      image={image}
      creatorId={creatorId}
      currUserId= {currUserId}
      likedBy={likedBy}
      retweetedBy={retweetedBy}/>
    </Link>
  )
}

PostContent.tsx

const PostContent = ({
  id,
  timestamp,
  tweet,
  name,
  image,
  creatorId,
  currUserId,
  likedBy,
  retweetedBy
}) => {  
    const [deletePost] = useDeletePostMutation();
    
    return (
    <article className="border-b-2 border-stone-100 flex items-start gap-x-2 p-4 hover:cursor-pointer" key={id}>
      <Image className='rounded-full cursor-pointer' src={image} width={45} height={45}/>      
      <div className='w-full'>
          <div className='flex'>
            <h4 className='font-bold cursor-pointer'>{name}</h4>
            <h5 className='ml-2 text-slate-500'>{'@__' name}</h5>
          </div>
          <p>{tweet}</p>
        <div className='flex justify-around mt-3'>
          <FiMessageCircle size={20} className='mr-2 cursor-pointer hover:text-slate-400'/>
          <LikedPostsStats likedBy={likedBy} currUserId={currUserId} id={id}/>
          {creatorId!==currUserId ?
            <RetweetedPostsStats retweetedBy={retweetedBy} currUserId={currUserId} id={id}/> : ''}
          {creatorId===currUserId ? 
            <AiOutlineDelete size={20} className='mr-2 cursor-pointer hover:text-slate-400' onClick={()=>{console.log(id); deletePost(id)}}/>
            : '' }
        </div>
      </div>
    </article>
  )
}

CodePudding user response：

You can create your own custom Link component from Next.js Link component.

import NextLink from "next/link";

const Link = ({
  children,
  href,
  ...props
}) => (
  <NextLink href={href} passHref>
    <a {...props}>{children}</a>
  </NextLink>
);

Then wrap it around your components that need navigation in the same way that you did.

CodePudding user response：

You should try wrapping PostContent in an <a><a/> tag and using the passHref prop in your link <Link href={`post/${id}`} passHref>