例如,我想从getData函数中切换URL。我有我的主页组件与json todos。我可以通过我的客户端组件将“todos”替换为“users”吗?
import styles from './page.module.css'
import Button from "@/components/Button";
async function getData() {
const res = await fetch(`https://jsonplaceholder.typicode.com/todos`);
if (!res.ok) {
throw new Error('Failed to fetch data');
}
return res.json();
}
export default async function Home() {
const data = await getData();
return (
<main className={styles.main}>
<div>
{data.map(item => {
return item.id
})}
</div>
<Button />
</main>
)
这是我的按钮。我不完全明白我怎么能改变我的网址在服务器重新呈现。例如,我点击我的按钮,“todos”也改变了“用户”。如果你能写一些例子。
'use client'
export default function Button(props){
props.getData('users')
return(
<button>3</button>
)
}
1条答案
按热度按时间zz2j4svz1#
我没试过,但应该能用。
您需要在
getData
中添加参数以接受路由。然后在初始加载时,传入“todos”
你需要将函数
getData
传递给按钮,然后调用它。但是,我个人不会这样做,我会创建一个新的路由
/user/[id].tsx
,然后查询您在该组件中点击的特定用户。这称为动态路由,请参阅Next13文档