NEXT.js 14 将数据从页面传递到其他页面

Question

我对编程世界相当陌生，特别是 next.js，我有一个页面，我在其中执行获取并获得响应，该响应是包含数据的对象，当获取成功时，使用 router.push页面被重定向到另一个我想显示从 fetch 接收到的数据的地方

const handleSubmit = async (event: any) => {
    event.preventDefault(); 
  
    try {
      const response = await fetch('http://localhost:8080/api/auth/signin', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });
  
      const responseData = await response.json();
  
      
      if (responseData) {
        console.log('Login effettuato con successo!', responseData);
        localStorage.setItem('accessToken', responseData.token);
        localStorage.setItem('username', responseData.username);
        
  
        toast({
          description: "Login effettuato con successo"
        });
  
        
        router.push({
          pathname: '/', 
          query: responseData  
        });
  
        setFormData({
          username: '',
          password: ''
        });
      } else {
        // Altrimenti, la risposta non è come previsto
        console.error('La risposta dall\'API non è come previsto:', responseData);
        setError('Credenziali non valide. Si prega di riprovare.');
      }
  
    } catch (error) {
      console.error('Errore durante la registrazione:', error);
    }
  };

它在 router.push 上给了我错误，但无论如何，如何在页面之间传递响应？

非常感谢

Answer 1

假设您使用的是App Router，要从父页面传递数据，您可以在父页面中设置搜索参数：

'use client'

import { useRouter, useSearchParams } from 'next/navigation';

export default function ParentPage() {
  // ...

  const router = useRouter();

  const searchParams = useSearchParams();
  
  const handleSubmit = async (event: any) => {
    // ...

    toast({
      description: "Login effettuato con successo"
    });

    // get current search params
    const params = new URLSearchParams(searchParams.toString());
    
    // set a new parameter with the `data` key: `key: value`
    params.set(data, responseData);

    // stringify the parameters to be able to use in `router.push`
    router.push(`/?${params.toString()}`);
  
    // remaining code
  };

  // ...
}

在子页面中，您应该从搜索参数中获取数据：

'use client'

import { useSearchParams } from 'next/navigation';

export default function ChildPage() {
  const searchParams = useSearchParams();

  // get the `data` search parameter
  const data = searchParams.get('data')

  // remaining code
}

我希望这有帮助。