Next.js基于useRouter的模板路由场景下API重复调用问题咨询

你观察到的两次router状态更新是Next.js客户端水合阶段的标准路由解析流程，不是异常bug：

• 第一次触发：水合刚初始化时，先返回和当前URL匹配的带占位符的路由模板路径（例如/[design]/[product]）
• 第二次触发：客户端完成动态路由参数解析后，把填充了实际参数的真实路径（例如/blue/shirt）更新到router实例上
  直接把整个router对象作为useEffect的依赖，会把这两次状态更新都捕获到，自然会触发两次请求执行。

用官方内置的路由就绪判断替代手动检测占位符 #

Next.js的useRouter返回对象自带isReady标记，专门用来判断「路由是否完成全部动态参数解析、可以拿到真实路径与查询参数」，完全不需要自己写逻辑检测路径里的[]占位符。

改造后的完整自定义hook代码：

export const usePage = () => {
    const router = useRouter();
    const [page, setPage] = useState()

    useEffect(() => {
        // 路由没完成参数解析时直接跳过，不发请求
        if (!router.isReady) return;

        (async () => {
            const u = new URL(`https://example.com${router.asPath}`)
            const targetApiPath = `/api${u.pathname}.json${u.search}`
            const results = await fetch(targetApiPath, { method: 'GET' });
            const json = await results.json();
            setPage(json)
        })();
    // 只把实际用到的响应式字段当依赖，避免router引用变动触发冗余执行
    }, [router.isReady, router.asPath]);

    return page;
}

这个方案比你之前想的占位符检测逻辑好的地方：

• 不会漏匹配特殊路由语法（比如可选catch-all路由[[...slug]]）
• 是Next.js官方维护的判断逻辑，后续版本升级不会出现兼容问题
• 不会因为把整个router对象当依赖，触发其他无关路由字段变动（比如语言配置、路由事件订阅）导致的冗余effect执行

增加请求竞态兜底 #

如果需要更严谨的请求管控，可以在effect里加请求取消逻辑，避免短时间内多次切换路径时，旧的还没返回的请求覆盖新的请求结果：

useEffect(() => {
    if (!router.isReady) return;
    // 初始化请求控制器，用来中断上一个没完成的请求
    const abortController = new AbortController();
    const u = new URL(`https://example.com${router.asPath}`)
    const targetApiPath = `/api${u.pathname}.json${u.search}`

    (async () => {
        try {
            const results = await fetch(targetApiPath, {
                method: 'GET',
                signal: abortController.signal
            });
            const json = await results.json();
            setPage(json)
        // 把主动中断的请求错误过滤掉，避免无意义的控制台报错
        catch (err) {
            if (err.name !== 'AbortError') throw err;
        }
    })();

    // 组件卸载或者路径变化时，自动清理上一个请求
    return () => abortController.abort();
}, [router.isReady, router.asPath]);

你之前想的“检测路径里有没有[]占位符，再判断要不要发请求”的逻辑有先天的误判风险：

• 嵌套的可选catch-all路由本身就带[[]]的双括号语法，写正则匹配很容易失效
• 如果用户实际访问的URL里本来就有合法的方括号字符（比如查询参数是?tag=[new]），会被误判成模板路径，直接跳过真实的API请求

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