我有一个服务器组件(使用Next.js 13.4.1),它可以读取本地服务器中的json文件,并且我在这个组件上有一个按钮,供用户返回上一页。代码如下:
import 'server-only';
import { useRouter } from 'next/router';
function getLocalData() {
// Read and return local data in the server
}
export default function Page() {
const data = getLocalData();
const router = useRouter();
return (
<div>
<div>{ data }</div>
<button onClick={() => router.back()}>Go back</button>
</div>
);
}
运行此代码会导致错误:“您有一个导入next/router的服务器组件。请改用next/navigation。"。在尝试使用“next/navigation”后,我得到了另一个错误:“错误:useRouter仅在客户端组件中工作。在文件顶部添加“使用客户端”指令以使用它。
有没有办法在服务器呈现的组件中实现简单的javascript:history.back()?先谢谢你了。
1条答案
按热度按时间55ooxyrt1#
即使我们想象像
router.back()
这样的东西神奇地与服务器组件一起工作,您也会遇到另一个问题-服务器组件不能具有任何交互性或事件侦听器,例如。onClick()
,onChange()
等(也没有状态或效果挂钩,没有浏览器API等,检查此表进行比较)。为了解决这个问题,你可以做一个小的客户端组件(见文档:将客户端组件移动到叶子),并在那里使用该逻辑:
在文档中,还有其他关于如何使用和混合服务器和客户端组件的模式:
https://nextjs.org/docs/getting-started/react-essentials#patterns