我的"getStaticPaths"函数有问题。在getStaticPaths中未将必需的参数(id(作为字符串提供。甚至我也使用过id:users.id.toString((
export default function usersID({ users }) {
return (
<div>
<h1> {mobile.name} </h1>
</div>
);
}
export const getStaticPaths = async () => {
const res = await fetch(`http://jsonplaceholder.typicode.com/users`);
const data = await res.json();
const paths = data.map((users) => {
return {
params: {
id: users.id.toString()
},
};
});
return {
paths,
fallback: false,
};
};
export const getStaticProps = async (context) => {
const id = context.params.id;
const res = await fetch(`http://jsonplaceholder.typicode.com/users/${params.id}` );
const data = await res.json();
return {
props: { users: data },
};
};
我这边没有错误,只是在getStaticProps中它不是params.id而是id
文件夹结构为
---用户----->[id].js
使用id 2可从my_url.example/user/2 访问
//[id].js
import React from "react";
const User = ({ users }) => {
console.log(users);
return <div>user</div>;
};
export const getStaticPaths = async () => {
const res = await fetch(`http://jsonplaceholder.typicode.com/users`);
const data = await res.json();
const paths = data.map((users) => {
return {
params: {
id: users.id.toString(),
},
};
});
return {
paths,
fallback: false,
};
};
export const getStaticProps = async (context) => {
const id = context.params.id;
const res = await fetch(`http://jsonplaceholder.typicode.com/users/${id}`);
const data = await res.json();
return {
props: { users: data },
};
};
export default User;