Muat semula paksa adalah akibat daripada mengakses laluan tidak ditentukan atau halaman ralat dalam Next.js

Question

Mengakses laluan atau halaman ralat yang tidak ditentukan menyebabkan Next.js melakukan muat semula keras, menyebabkan konteks saya kembali ke keadaan lalainya (iaitu nilai yang disimpan dalam pembolehubah userProfilekeadaan menjadi batal)

Saya mempunyai reka letak menggunakan {stucture: Sidebar and main} dan dalam komponen Sidebar saya memaparkan e-mel pengguna yang saya dapat daripada cangkuk konteks sebagai pembolehubah keadaan.

Walau bagaimanapun, apabila saya mengklik pada laluan yang tidak ditentukan atau memasukkan secara manual dalam URL, saya mendapat halaman ralat tersuai yang dilemparkan kembali ke halaman indeks ('/'), tetapi disebabkan ini saya kehilangan status saya kembali ke null(konteks).

Fail konteks saya kelihatan seperti di bawah

import { createContext, useState, useContext } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [userProfile, setUserProfile] = useState(null);

  return (
    <UserContext.Provider value={{ userProfile, setUserProfile }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUserContext() {
  return useContext(UserContext);
}

Saya menetapkan status saya (berjaya) dalam pengendali log masuk halaman log masuk.

Adakah terdapat sebarang penyelesaian atau perlukah saya menggunakan storan tempatan

Pada masa ini, apabila dia kembali ke halaman indeks, saya mendapat profil pengguna semula.

Saya rasa storan tempatan mungkin pilihan yang lebih baik.

Answer 1

Saya menyelesaikan masalah saya dengan hanya menetapkan keadaan dalam fail konteks dan bukan di tempat lain. Ringkasnya, saya mendapat data profil pengguna dalam fail context.js dan menetapkan keadaan di sana supaya ia boleh digunakan di mana-mana sahaja. Jika sesiapa menghadapi masalah yang sama, sila sebut saya!

Fail context.js saya kelihatan seperti di bawah

import { createContext, useState, useEffect, useContext } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [userProfile, setUserProfile] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUserProfile = async () => {
      try {
        const res = await fetch(process.env.NEXT_PUBLIC_API_DOMAIN + '/userProfile');
        const userData = await res.json();
        setUserProfile(userData);
        setLoading(false);
      } catch (error) {
        console.error("Error fetching user profile:", error);
        setLoading(false);
      }
    };

    fetchUserProfile();
  }, []);

  return (
    
      {children}
    
  );
}

export function useUserContext() {
  return useContext(UserContext);
}