Next.js客户端组件用Router重定向报错：未找到路由器实例

你用的是Next.js 13+的App Router，但导入的是Pages Router专属的next/router模块——即便加了'use client'，这个旧API也无法在App Router的客户端组件中正常工作，所以才会抛出"找不到路由实例"的错误。

1. 替换路由API导入：把next/router换成App Router专用的next/navigation中的useRouter钩子
2. 初始化路由实例：在组件内调用useRouter()获取路由对象
3. 修正跳转逻辑：用router.push()替代Router.push()
4. 优化状态判断：初始postRes是空对象，会导致组件一渲染就触发跳转，需要改成判断是否有有效响应数据

"use client"

import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { useRouter } from 'next/navigation'; // 替换导入
import axios from 'axios';
import { useState, useEffect } from 'react';

const theme = createTheme();

export default function TestComponent() {
  const router = useRouter(); // 初始化路由实例
  const [postRes, setPostRes] = useState(null); // 初始值设为null，避免误触发

  const handleSubmit = async (event) => {
    event.preventDefault();
    const postData = {
        firstName: 'firstName',
        lastName: 'lastName',
        userName: 'userName',
        email: 'email',
        password: 'password',
    }
    try {
        const response = await axios.post('/apis/auth/createUser', postData);
        if (response.data) {
            console.log("here");
            setPostRes(response.data);
        }
    } catch (error) {
        alert(error?.response?.data);
    }
  };

  useEffect(() => {
    // 只有当postRes有有效数据时才跳转
    if (postRes) {
        router.push('/login'); 
    }
  }, [postRes, router]); // 把router加入依赖数组

  return (
    <Button onClick={handleSubmit}> {/* 简化onClick写法 */}
        click
    </Button>
  );
}

额外说明：如果你的项目是Next.js 12及以下的Pages Router，问题则出在直接使用Router对象而非useRouter钩子，此时只需改成导入useRouter并初始化实例，再用实例调用push即可。

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