Next.js 13中如何使用next/navigation实现返回上一页？

方案1：改用浏览器原生API #

直接用浏览器自带的history.back()实现返回逻辑，无需依赖Next.js的useRouter，从根源避免服务端渲染冲突：

'use client';

export default function SupplierList() {
  return (
    <>
      <div>
        <button onClick={() => window.history.back()}>Back</button>
      </div>
    </>
  );
}

方案2：动态导入组件并禁用SSR #

如果一定要用Next.js的useRouter，可以通过动态导入组件并关闭服务端渲染，确保组件只在客户端执行：

第一步：拆分返回按钮组件（比如命名为BackButton.js） #

'use client';
import { useRouter } from 'next/navigation';

export default function BackButton() {
  const router = useRouter();
  return (
    <button onClick={() => router.back()}>Back</button>
  );
}

第二步：在父组件中动态导入 #

import dynamic from 'next/dynamic';

// 禁用SSR，组件仅在客户端渲染
const BackButton = dynamic(() => import('./BackButton'), { ssr: false });

export default function SupplierList() {
  return (
    <>
      <div>
        <BackButton />
      </div>
    </>
  );
}

方案3：用useEffect确保客户端环境 #

通过状态标记组件已在客户端挂载，避免服务端与客户端渲染的HTML不匹配：

'use client';
import { useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function SupplierList() {
  const router = useRouter();
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // 组件挂载后标记为客户端环境
    setIsClient(true);
  }, []);

  return (
    <>
      {/* 仅在客户端渲染按钮 */}
      {isClient && (
        <div>
          <button onClick={() => router.back()}>Back</button>
        </div>
      )}
    </>
  );
}

内容的提问来源于stack exchange，提问作者David