存取未定義的路徑或錯誤頁面會導致Next.js進行硬刷新，從而導致我的上下文回到預設狀態（即儲存在userProfile狀態變數中的值變為null）
我有一個佈局，使用{stucture：Sidebar和main}，在Sidebar元件中，我顯示使用者電子郵件，我從上下文鉤子作為狀態變數取得。
但是，當我點擊未定義的路徑或在URL中手動輸入時，我會拋出一個自訂錯誤頁面，返回索引頁面（'/'），但由於這個原因，我失去了我的狀態回到null（上下文）。
我的上下文文件如下所示
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);
}
我在登入頁面的登入處理程序中設定我的狀態（成功時）。
是否有任何解決方法，或者我應該使用本地儲存
目前，當他回到索引頁面時，我會再次取得使用者設定檔。
我認為本地儲存可能是更好的選擇。
我透過只在上下文文件中設定狀態，而不是在任何其他地方設定狀態來解決了我的問題。簡而言之，我在context.js檔案中取得使用者的個人資料數據，並在那裡設定狀態，這樣可以在任何地方使用。如果有人遇到相同的問題，請提到我！
我的context.js檔案如下所示
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);
}