如何解决如何解决动态路由在nextjs中不起作用?
我使用 getStaticPaths + getStaticProps 在文件夹“pages/posts/[id].js”中呈现动态页面。 一切正常,但是当我将页面名称更改为 [title].js 以获得更友好的 url 时,它不会呈现数据。能否请您对此案提出建议?
pages/posts/[title].js: 仅在更改文件名是 [id.js] 时才有效
import slugify from 'slugify';
function Post({ post }) {
return (
<div>
<h3>Title: {post.title}</h3>
<div>Body: {post.body}</div>
</div>
)
};
export async function getStaticPaths() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
const paths = posts.map((post) => ({
params: {
id: post.id.toString(),title: slugify(post.title)
},}));
return { paths,fallback: true };
};
export async function getStaticProps({ params }) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
const post = await res.json();
return { props: { post } }
};
export default Post;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。