L'actualisation forcée est une conséquence de l'accès à des chemins non définis ou à des pages d'erreur dans Next.js

Question

L'accès à un chemin non défini ou à une page d'erreur entraîne une actualisation matérielle de Next.js, ce qui fait revenir mon contexte à son état par défaut (c'est-à-dire que la valeur stockée dans la variable userProfilestate devient nulle)

J'ai une mise en page utilisant {stucture : Sidebar and main} et dans le composant Sidebar, j'affiche l'e-mail de l'utilisateur que je reçois du hook contextuel en tant que variable d'état.

Cependant, lorsque je clique sur un chemin non défini ou que je saisis manuellement l'URL, une page d'erreur personnalisée est renvoyée à la page d'index ("/"), mais à cause de cela, je perds mon statut en null (contexte).

Mon fichier contextuel ressemble à ci-dessous

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);
}

J'ai défini mon statut (en cas de réussite) dans le gestionnaire de connexion de la page de connexion.

Existe-t-il une solution de contournement ou dois-je utiliser le stockage local

Actuellement, lorsqu'il revient à la page d'index, je récupère à nouveau le profil utilisateur.

Je pense que le stockage local pourrait être une meilleure option.

Answer 1

J'ai résolu mon problème en définissant uniquement l'état dans le fichier de contexte et pas ailleurs. En bref, je récupère les données de profil de l'utilisateur dans le fichier context.js et j'y définis l'état afin qu'il puisse être utilisé partout. Si quelqu'un rencontre le même problème, merci de me mentionner !

Mon fichier context.js ressemble à ci-dessous

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);
}