React+Next.js中使用router.push刷新页面报错：找不到路由实例求助

报错信息 #

Error: No router instance found. you should only use "next/router" inside the client side of your app.

问题原因 #

你在服务端渲染（SSR）的组件中直接执行了useRouter相关的路由操作。next/router的API仅能在客户端浏览器环境中运行，如果组件在服务端初始化时就调用路由方法（比如你的代码里直接在组件顶层执行router.push），就会触发这个报错。

解决方法 #

1. 用useEffect包裹路由逻辑 #

useEffect是React专门处理客户端副作用的钩子，只会在组件挂载到浏览器后执行，完美规避服务端调用问题：

import { useRouter, useEffect } from 'next/router';

const Post = ({ post, blogs }) => {
    const router = useRouter();
    
    useEffect(() => {
        const spath = router.asPath;
        router.push({ pathname: spath, query: '' });
    }, [router]); // 依赖router确保逻辑正确触发
    
    // 其他组件代码...
}

2. 手动判断客户端环境 #

如果不想用useEffect，可以通过typeof window !== 'undefined'判断当前是否在客户端，再执行路由操作：

import { useRouter } from 'next/router';

const Post = ({ post, blogs }) => {
    const router = useRouter();
    
    if (typeof window !== 'undefined') {
        const spath = router.asPath;
        router.push({ pathname: spath, query: '' });
    }
    
    // 其他组件代码...
}

不过更推荐第一种useEffect的写法，符合React的设计规范。

3. 简化刷新逻辑（可选） #

如果你的需求只是刷新当前页面，没必要拼接路径，可以直接用router.replace实现相同效果：

useEffect(() => {
    router.replace(router.asPath);
}, [router]);

如果需要强制硬刷新（类似按F5），可以直接调用浏览器API：

useEffect(() => {
    window.location.reload();
}, []);

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