Estoy tratando de que el título también sea el hipervínculo. Sin embargo, necesito agregar guiones para que los hipervínculos funcionen en artículos con títulos que tienen más de una palabra. ¿Cuál sería el mejor método para lograr esto?
Código actual:
https://example.com/example 01
Lo que estoy buscando:
https://example.com/example-01
Código de ejemplo a continuación:
#Post.tsx
import "./Posts.css"; import Post from "../Post/Post"; const Posts = () => { const blogPosts = [ { title: "Example 01", body: "Example Description", author: "John Doe", imgUrl: "https://image.jpg }, { title: "Example 02", body: "Example Description", author: "Jane Doe", imgUrl: "https://image.jpg" } ]; return ( <div className="posts-container"> {blogPosts.map((post, index) => ( <Post key={index} index={index} post={post} /> ))} </div> ); }; export default Posts;#Post.tsx
import "./Post.css"; const Post = ({ post: { title, body, imgUrl, author }, index }) => { return ( <div className="post-container"> <h1 className="heading">{title}</h1> <img className="image" src={imgUrl} alt="post" /> <div className="info"> <h4>Written by: {author}</h4> </div> <p>{body}</p> <p><a href={"/"+title}>Read More</a></p> </div> ); }; export default Post;Utilice el paquete slugify npm para convertir su título en un slug: https://www.npmjs.com/package/slugify
En su componente Post , puede simplemente reemplazar todos los espacios en el título con guiones para el destino del enlace:
import "./Post.css"; const Post = ({ post: { title, body, imgUrl, author }, index }) => { return ( <div className="post-container"> <h1 className="heading">{title}</h1> <img className="image" src={imgUrl} alt="post" /> <div className="info"> <h4>Written by: {author}</h4> </div> <p>{body}</p> <p><a href={"/" + title.replaceAll(" ", "-")}>Read More</a></p> </div> ); }; export default Post;