El componente PostsList representa la lista de publicaciones, quiero que sea tal que cuando se haga clic sobre el elemento div de una publicación, se redirija al enlace de esa publicación específica

 const PostsListView = ({ posts, setError, isloggedin }) => { const [redirectCreatePost, setRedirectCreatePost] = React.useState(false) if (redirectCreatePost) return (<Navigate to='createPost' />) return ( <Grid container align="center" alignItems="center" justify="center" direction="column" > { posts.map(({ category, username, postHeading, createdAt, postid }) => { return ( <Link to={`post/${postid}`} style={{ textDecoration: 'none', color: 'black' }}> <Grid key={postid} item container alignItems="center" style={{ width: 600, borderRadius: 10, margin: 5, backgroundColor: '#D3D3D3' }}> <Grid container direction="column"> <Grid item container justify="flex-end"> <Grid item style={{ marginTop: 5, marginLeft: 20 }}> <b>{`c/${category}`}</b> </Grid> <Grid item style={{ marginTop: 5, marginLeft: 5 }}> {` posted by u/${username} ${getTime(createdAt)}`} </Grid> </Grid> </Grid> <Grid item container alignItems="center" align="left"> <Typography variant="h6" style={{ width: 600, marginLeft: 20, marginRight: 20 }}>{postHeading}</Typography> </Grid> </Grid> </Link> ) }) } </Grid> ) }

Aunque esto parece crear una etiqueta <a> alrededor del elemento de cuadrícula <div> en el DOM, no se puede hacer clic. Intenté dar el <Link> como accesorio de component al elemento de Cuadrícula y, sin embargo, no tuve suerte. Por extraño que parezca, funciona bien cuando reemplazo <Link> con <a> , pero al hacerlo, al hacer clic en el enlace, se actualiza toda la página y se pierde todo el estado de la aplicación. Agradezco cualquier ayuda. ¡Gracias!