Next.js中使用next/navigation获取URL分段的问题排查

一、为什么useParams和useSearchParams拿不到:id？ #

这是预期行为，原因如下：

• useParams只认文件系统路由里定义的动态段，也就是你得建/chat/[id]这种动态路由文件/文件夹，它才会返回参数。你用的是重写规则把/chat/:id映射到静态的/chat页面，所以useParams自然返回空对象。
• useSearchParams是用来抓URL里的查询参数（就是?id=xxx这种），你这个:id是路径段，不是查询参数，所以searchParams.get('id')返回null完全正常。
• 旧的next/router的router.query能拿到，是因为它的逻辑会把重写规则里的源路径动态段自动塞到query里，但新的next/navigation（App Router）API设计更严格，只遵循文件系统的路由定义，不会自动处理重写的参数。

二、怎么在next/navigation里拿到这个:id？ #

既然你发现usePathname()返回的是带:id的完整路径（比如/chat/123），可以直接解析路径提取：

import { usePathname } from 'next/navigation';

export default function ChatPage() {
  const pathname = usePathname();
  // 简单拆分取最后一段
  const id = pathname.split('/').pop();
  // 或者用正则更严谨匹配
  const match = pathname.match(/^\/chat\/([^/]+)$/);
  const id = match ? match[1] : null;

  return <div>当前聊天ID：{id}</div>;
}

如果想更贴合App Router的设计，建议直接把目标页面改成动态路由/chat/[id]（把页面文件放在app/chat/[id]/page.js），这样就能直接用useParams拿参数：

import { useParams } from 'next/navigation';

export default function ChatPage() {
  const params = useParams();
  const id = params.id; // 直接获取id

  return <div>当前聊天ID：{id}</div>;
}

这种情况下重写规则可以保留，或者直接让用户访问/chat/xxx，两种方式都能正常拿参数。

三、关于next/navigation没有beforePopstate的问题 #

App Router的next/navigation确实没提供beforePopstate这类内置方法，不过可以用浏览器原生事件来替代：

import { usePathname, useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function MyPage() {
  const pathname = usePathname();
  const router = useRouter();

  useEffect(() => {
    // 处理页面刷新/关闭
    const handleBeforeUnload = (e) => {
      e.preventDefault();
      e.returnValue = ''; // 触发浏览器确认弹窗
    };

    // 处理浏览器前进后退
    const handlePopState = () => {
      if (!confirm('确定要离开当前页面吗？')) {
        // 无法直接阻止popstate，只能重新push当前路径模拟阻止
        router.push(pathname);
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    window.addEventListener('popstate', handlePopState);

    return () => {
      // 组件卸载时移除监听
      window.removeEventListener('beforeunload', handleBeforeUnload);
      window.removeEventListener('popstate', handlePopState);
    };
  }, [pathname, router]);

  return <div>页面内容</div>;
}

注意：浏览器的popstate事件没法直接阻止，只能通过重新跳转回当前路径来模拟“拦截”效果，而beforeunload只能处理页面刷新或关闭的场景。

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