Next.js中如何在filter.jsx与test.jsx间传递过滤后的数据？

1. 正确实现跳转并传递过滤后的数据 #

不管用Link还是router.push，核心是通过路由状态（state）或本地存储传递数据，以下是对应不同路由方案的具体实现：

方案A：Next.js App Router（适配你的filter/route.js接口） #

在filter.jsx中：

'use client';
import { useRouter } from 'next/navigation';

export default function FilterPage() {
  const router = useRouter();
  // 假设filteredData是接口返回的过滤后题库数据
  const filteredData = [{ id: 1, question: "三角函数计算题" }, ...];

  const handleStartTest = () => {
    // 通过路由state传递数据，适合非敏感、数据量适中的场景
    router.push('/test', {
      state: { filteredData }
    });
  };

  return (
    <div>
      {/* 你的过滤表单逻辑 */}
      <button onClick={handleStartTest}>进入测试</button>
    </div>
  );
}

在test.jsx中接收数据：

'use client';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function TestPage() {
  const router = useRouter();
  const [testQuestions, setTestQuestions] = useState([]);

  useEffect(() => {
    const routeState = router.state;
    if (routeState?.filteredData) {
      setTestQuestions(routeState.filteredData);
    } else {
      // 无数据时跳转回过滤页
      router.push('/filter');
    }
  }, [router]);

  return (
    <div>
      <h2>测试题目</h2>
      {testQuestions.map(item => (
        <div key={item.id} className="question-item">
          {item.question}
        </div>
      ))}
    </div>
  );
}

方案B：普通React项目（React Router） #

在filter.jsx中：

import { useNavigate } from 'react-router-dom';

function FilterPage() {
  const navigate = useNavigate();
  const filteredData = [{ id: 1, question: "三角函数计算题" }, ...];

  const handleStartTest = () => {
    navigate('/test', {
      state: { filteredData }
    });
  };

  return <button onClick={handleStartTest}>进入测试</button>;
}

在test.jsx中接收数据：

import { useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';

function TestPage() {
  const location = useLocation();
  const [testQuestions, setTestQuestions] = useState([]);

  useEffect(() => {
    if (location.state?.filteredData) {
      setTestQuestions(location.state.filteredData);
    } else {
      navigate('/filter');
    }
  }, [location]);

  return (
    {/* 渲染测试题目 */}
  );
}

2. 常见错误排查 #

• 若使用Link组件，需将数据放在state属性而非直接拼接在URL中（避免URL过长或数据泄露）：

  // 错误写法
  <Link href={`/test?data=${JSON.stringify(filteredData)}`}>进入测试</Link>
  // 正确写法（Next.js）
  <Link href="/test" state={{ filteredData }}>进入测试</Link>
  

• Next.js中必须在客户端组件中使用路由钩子，记得添加'use client'指令。
• 若过滤后数据量极大，建议存储过滤条件到localStorage，再在test.jsx中重新调用接口获取数据：

  // filter.jsx存储条件
  const handleStartTest = () => {
    localStorage.setItem('filterParams', JSON.stringify({ subject, grade, difficulty }));
    router.push('/test');
  };
  
  // test.jsx重新请求数据
  useEffect(() => {
    const params = JSON.parse(localStorage.getItem('filterParams'));
    if (params) {
      fetch('/api/filter', {
        method: 'POST',
        body: JSON.stringify(params)
      })
      .then(res => res.json())
      .then(data => setTestQuestions(data));
    }
  }, []);
  

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