Next.js+TS+Tailwind登录注册页next/router路由实例缺失报错求助

问题原因 #

你使用的是Next.js App Router（通过"use client"标识客户端组件），但错误导入了Pages Router专属的useRouter（来自next/router），App Router环境无法识别该路由实例，因此触发报错。

修复步骤 #

1. 替换路由钩子导入路径
   将next/router的useRouter替换为App Router专属的next/navigation版本：

   // 替换前
   import { useRouter } from "next/router";
   // 替换后
   import { useRouter } from "next/navigation";
   

2. 修正跳转路径格式
   App Router的router.push推荐使用绝对路径，将相对路径./login改为/login：

   // 替换前
   router.push('./login');
   // 替换后
   router.push('/login');
   

3. 确认客户端组件标识位置
   确保"use client";是文件的第一行代码，无任何前置内容（包括注释），保证组件在客户端环境运行。

修改后的完整代码片段 #

"use client";

import Link from "next/link";
import React from 'react';
import axios from "axios";
import { useState } from "react";
import { useRouter } from "next/navigation"; // 已修改导入路径
import { BsEyeSlash, BsEye } from "react-icons/bs";
import Image from "next/image";

const Register = () => {
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  
  const router = useRouter();

  function addUser() {
    const user = {
      email: email,
      username: username,
      name: name,
      password: password,
    };
    
    axios
      .post(
        "http://192.168.0.72:4000/api/auth/register",
        user
      )
      .then((res) => {
        alert(res.data.data);
        router.push('/login'); // 已修改跳转路径
      })
      .catch((err) => {
        alert(err);
      });
  }

  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };

  return (
    <main>
      <div className="flex flex-col justify-center items-center h-screen">
        <div className="box-border h-4/5 mt-1 w-72 p-4 border-1 border-green-900 shadow-2xl flex flex-col justify-start items-center mb-4">
          <Image src="/logosocial.png" width={200} height={100} alt="" />
          <label className="mt-4 text-sm">Email</label>
          <input
            type="email"
            id="email"
            onChange={(e) => setEmail(e.currentTarget.value)}
            className="mt-2 p-2 border-2 border-green-900"
          />
          {/* Rest of the input fields */}
          <button
            onClick={addUser}
            className="mt-5 bg-green-900 hover:bg-green-600 text-white font-bold py-2 px-6 rounded"
          >
            Continuar
          </button>
        </div>
        <div className="box-border h-20 mt-1 w-72 p-4 border-1 border-green-900 shadow-2xl flex flex-col justify-start items-center">
          <h1 className="mt-4" style={{ fontSize: "14px" }}>
            <div>
              Tens uma conta? ‎
              <Link className="underline text-green-900 " href="/login">
                Inicia Sessão.
              </Link>
            </div>
          </h1>
        </div>
      </div>
    </main>
  );
};

export default Register;

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