如何在Next.js 14的App Router中获取上一个路由？

之前在React Router或Next.js Pages路由里，你可以通过跳转传递状态的方式获取上一路径，但App Router的API有变化，asPath已从next/navigation的useRouter中移除，下面提供两种可行的实现方案：

方案一：跳转时手动传递来源路径（类似React Router的做法） #

在需要跳转的客户端组件中，用usePathname获取当前路径，再通过router.push的第二个参数传递状态：

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

export default function SomePage() {
  const currentPath = usePathname();
  const router = useRouter();

  const navigateToHome = () => {
    // 跳转首页时传递当前路径作为来源
    router.push('/', { state: { from: currentPath } });
  };

  return <button onClick={navigateToHome}>回到首页</button>;
}

在目标页面（比如首页）的客户端组件中，通过useRouter的state属性获取传递的来源路径：

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

export default function Home() {
  const router = useRouter();
  const fromPath = router.state?.from;

  return (
    <div>
      {fromPath ? `你来自：${fromPath}` : '直接访问的首页'}
    </div>
  );
}

方案二：自定义Hook自动追踪上一路径 #

如果不想每次跳转都手动传递状态，可以写一个自定义Hook，结合usePathname和useRef自动记录上一个路径：

'use client';
import { usePathname } from 'next/navigation';
import { useEffect, useRef } from 'react';

export function usePreviousRoute() {
  const currentPath = usePathname();
  const previousPathRef = useRef<string | null>(null);

  useEffect(() => {
    // 每次路径变化时，更新ref保存当前路径，下次渲染时ref就是上一个路径
    previousPathRef.current = currentPath;
  }, [currentPath]);

  return previousPathRef.current;
}

使用这个Hook的示例：

'use client';
import { usePreviousRoute } from './hooks/usePreviousRoute';

export default function SomePage() {
  const previousRoute = usePreviousRoute();

  return (
    <div>
      上一页路径：{previousRoute || '无历史记录'}
    </div>
  );
}

注意事项 #

• 以上所有代码都需要放在客户端组件中，务必添加'use client'指令
• 自定义Hook的方式只能追踪客户端路由跳转的路径，页面刷新后历史记录会丢失
• 服务器组件无法直接获取上一路径，若需要在服务端使用，可通过客户端传递状态或Cookie等方式实现

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