Estoy trabajando en nextjs, estoy tratando de hacer "rutas dinámicas", quiero que después de hacer clic mi URL sea como "myurl.com/article/55"
para esto uso la siguiente "etiqueta de enlace"
<Link href={{pathname: "article/[id]",query: { id: post.id },}}> <a className="rdmre-btn"> Read More</a> </Link>Y aquí está mi código en ("pages/article/[slug].js) en el archivo, ¿Dónde me equivoco? Quiero que cada vez que haga clic en cualquier blog, se abra la página de detalles del blog.
import Axios from "axios"; import { useRouter } from "next/router"; import Link from "next/link"; import LatestBlogs from "../../components/LatestBlogs/LatestBlogs"; const Post = ({ post }) => { const router = useRouter(); const htmlString = post.description_front; if (router.isFallback) { return <div>Loading...</div>; } return ( <> <header className="bgbanner blog_header"> <div className="container cont"> <div className="header"> </div> </div> <div className="container "></div> </header> <section> <div className="container Blog_page_sidebar"> <div className="blog_details"> <div className="blog_image"> <img src={post.image} /> </div> <div className="blog_heading"> <h2>{post.title}</h2> </div> <div className="blog_detail"> <div className="product-des" dangerouslySetInnerHTML={{ __html: htmlString }} /> </div> </div> </div> </section> </> ); }; export default Post; export const getStaticProps = async ({ params }) => { const { data } = await Axios.get( `https://myurl.com/api/blogbyids/${params.id}` ); const post = data; return { props: { post, }, }; }; export const getStaticPaths = async () => { const { data } = await Axios.get( "myurl.com/admin-panel/api/blogs" ); const posts = data.slice(0, 10); const paths = posts.map((post) => ({ params: { id: post.id.toString() } })); return { paths, fallback: true, }; };[slug] se usa para tener rutas anidadas. Pero lo correcto es [...slug].js (info )
Ejemplo: myurl.com/article/[id]/[otherid]
En el ejemplo anterior podemos ver que en [id] se pueden anidar hijos. Puede nombrar este parámetro como desee.
Si desea tener su estructura como myurl.com/article/55 , debe tener la estructura de la siguiente manera:
En su carpeta de pages :
article ( pages/article )[id].js (puede nombrarlos como [slug].js o [specialId].js, sin importar el nombreAquí hay un ejemplo del código (URL: myurl.com/article/55; file: pages/article/[pid].js)
import { useRouter } from 'next/router' const Post = () => { const router = useRouter() //same name as name of your file, can be [slug].js; [specialId].js - any name you want const { pid } = router.query //result will be '55' (string) return <p>Post: {pid}</p> } export default Post