Next.js 12页面间输入数据传递失败，求问题排查与解决

问题根源 #

1. 发送页面参数格式错误：router.push的query参数必须是键值对对象，直接传入字符串会导致URL中缺少参数名，接收页面无法通过指定键获取值。
2. 路由路径不匹配：发送页面中router.push的pathname是/createproject/uploadnfts/nftdetails，但实际跳转的是/data，目标页面不一致导致参数无法正确传递。
3. 发送页面缺少必要导入与规范：未导入useState，组件名未大写（违反React组件命名规则），且表单缺少提交按钮无法触发提交事件。
4. 接收页面未处理路由就绪状态：Next.js客户端渲染时，router.query初始为空，直接解构会获取不到值。

修正后的发送页面代码（Index.js） #

import { useRouter } from "next/router";
import { useState } from "react";

function Index() {
  const router = useRouter();
  const [inputValue, setInputValue] = useState("");

  const handleImgInput = (e) => {
    e.preventDefault();
    router.push({
      pathname: "/data", // 匹配接收页面的路由路径
      query: { inputValue: inputValue } // 键值对形式传递参数
    });
  };

  return (
    <form onSubmit={handleImgInput}>
      <input
        type="email"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入邮箱"
      />
      <button type="submit">提交</button> {/* 添加提交按钮触发表单提交 */}
    </form>
  );
}

export default Index;

修正后的接收页面代码（Data.js） #

import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";

function Data() {
  const router = useRouter();
  const [inputValue, setInputValue] = useState("");

  useEffect(() => {
    // 等待路由完全就绪后获取参数
    if (router.isReady) {
      setInputValue(router.query.inputValue || "");
    }
  }, [router.isReady, router.query]);

  return (
    <div>
      <p>接收的输入值：{inputValue}</p>
    </div>
  );
}

export default Data;

关键修正说明 #

• 发送页面中query改为键值对后，URL会变为/data?inputValue=demo@gmail.com，接收页面可通过router.query.inputValue准确获取参数。
• 接收页面通过useEffect监听router.isReady，确保路由加载完成后再读取参数，避免初始渲染时参数为空的问题。
• 遵循React组件命名规范，组件名首字母大写，同时补上必要的提交按钮触发表单提交。

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