Next.js App Router动态路由参数无法获取且路由404问题求助

1. 修正路由访问路径 #

你的verify/[username]/page.tsx位于src/app根目录（不在(app)路由组内），正确访问路径应为/verify/你的用户名。如果访问时路径错误（比如嵌套在/signin/下），会直接触发404。检查跳转逻辑或手动输入的URL是否符合该结构。

2. 确保组件为客户端组件并正确使用useParams #

在App Router中，useParams仅能在客户端组件中使用，必须在文件顶部添加'use client'指令，否则无法获取参数：

'use client';

import { useState } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import axios, { AxiosError } from 'axios';
import { useToast } from '@/components/ui/toast';
import z from 'zod';

// 定义你的验证Schema
const VerifySchema = z.object({
  code: z.string().min(4, '验证码不能为空'),
});

type ApiResponse = {
  success: boolean;
  message: string;
};

export default function VerifyPage() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const router = useRouter();
  const params = useParams<{ username: string }>();
  
  // 直接解构参数，注意处理可能的undefined情况
  const username = params.username;
  console.log('当前用户名:', username);
  
  const { toast } = useToast();
  
  const form = useForm<z.infer<typeof VerifySchema>>({
    resolver: zodResolver(VerifySchema),
  });
  
  const onSubmit = async (data: z.infer<typeof VerifySchema>) => {
    setIsSubmitting(true);
    try {
      const response = await axios.post('/api/verify-code', {
        username,
        verifyCode: data.code,
      });

      if (response.data.success) {
        toast({
          title: '验证成功',
          description: response.data.message,
        });
        router.replace('/signin');
      }
    } catch (error) {
      const axiosError = error as AxiosError<ApiResponse>;
      toast({
        title: '验证失败',
        description: axiosError.response?.data?.message ?? '验证时出现错误',
        variant: 'destructive',
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  // 渲染表单内容
  return (
    <div className="container">
      {/* 你的表单JSX */}
    </div>
  );
}

3. 检查路由组与跳转逻辑 #

(app)是路由组，不会影响URL路径，signin/page.tsx对应/signin，verify/[username]/page.tsx对应/verify/xxx，二者为同级路由。如果从注册页跳转至验证页，确保跳转路径正确：

// 示例：在signup组件中跳转至验证页
router.push(`/verify/${用户输入的用户名}`);

4. 确认Next.js版本 #

确保使用Next.js 13.4及以上版本，useParams是该版本后稳定支持的App Router钩子，低版本可能存在兼容性问题。

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