next.js 如何在服务器组件中实现javascript：history.back()？

qvtsj1bj 于 2023-05-17 发布在 Java

关注(0)|答案(1)|浏览(206)

我有一个服务器组件（使用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（）？先谢谢你了。

next.js

来源：https://stackoverflow.com/questions/76201862/how-to-implement-javascripthistory-back-in-a-server-component

1条答案

按热度按时间

55ooxyrt1#

即使我们想象像router.back()这样的东西神奇地与服务器组件一起工作，您也会遇到另一个问题-服务器组件不能具有任何交互性或事件侦听器，例如。onClick()，onChange()等（也没有状态或效果挂钩，没有浏览器API等，检查此表进行比较）。
为了解决这个问题，你可以做一个小的客户端组件（见文档：将客户端组件移动到叶子），并在那里使用该逻辑：

// // ButtonThatHasClientSideLogic is a Client Component, move your logic there
import ButtonThatHasClientSideLogic from './ButtonThatHasClientSideLogic'

// Page is a server component by default 
export default function Page() {
  const data = getLocalData();

  return (
    <div>
      <div>{ data }</div>
      <ButtonThatHasClientSideLogic />
    </div>
  );
}

在文档中，还有其他关于如何使用和混合服务器和客户端组件的模式：
https://nextjs.org/docs/getting-started/react-essentials#patterns

赞(0）回复(0）举报 2023-05-17

我来回答

next.js 如何在服务器组件中实现javascript：history.back()？

1条答案

相关问题

热门标签

最新问答