React Context数据在路由到下一页后为空

Question

我有一个小的伪react应用程序，我创建了一个"主页"；在用户登录后，会为主页中的用户凭据设置主页上下文，我可以在主页上获得它。但我创建了另一个页面"；配置文件"；在我将路由更改为URL中的配置文件后，就不再有数据了。我知道，由于页面被刷新，数据会丢失，因为数据持久性是数据库的工作。但是，如果我必须为每个页面查询一些公共数据，那么上下文对表有什么好处？谢谢

在代码下方的主页上，我写道要设置用户凭据。

Home.js
**const { userCredentails, setUserCredentails } = useUserContext();**
useEffect(() => {
const getInitialData = async () => {
const returnData = await AuthFunction();
if (returnData.success) {
**setUserCredentails(returnData.user);**
return dispatch({ type: true, userData: returnData.user });
}
return dispatch({ type: false });
};
getInitialData();
}, []);

现在，如果想访问配置文件上的相同数据，我不想查询数据库，如何从那里获取数据。

**const cntx = useContext(userCredentialsContext);**

以上代码返回空对象

最后，这是context.js页面

从"反应"；；

export const userCredentialsContext = createContext({});
export const UserContextProvider = ({ children }) => {
const [userCredentails, setUserCredentails] = useState({});
return (
<userCredentialsContext.Provider
value={{ userCredentails, setUserCredentails }}
>
{children}
</userCredentialsContext.Provider>
);
};
export const useUserContext = () => {
const data = useContext(userCredentialsContext);
return data;
};

Answer 1

如果你通过使用锚点标签((或window.location来实现路由，那么整个页面都会刷新，包括你的上下文，并将其设置回默认状态，正确的方法是使用react router dom中的Link标签，这里有一个例子；

import { Link } from "react-router-dom";
<Link to="/home">Home</Link>