路由到下一页后，React Context 数据为空答案

【问题标题】：React Context data is empty after routed to next Page路由到下一页后，React Context 数据为空
【发布时间】：2022-06-10 23:35:38
【问题描述】：

我有一个小的虚拟反应应用程序，我在用户登录后创建了一个“主页”，主页上下文是为主页中的用户凭据设置的，我可以在主页上获取它。但是在将路由更改为 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 页面

导入 { useState, createContext, useContext } from "react";

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

【问题讨论】：

你如何重定向到另一条路线？是window.location.href = '/myRoute' ? 如果是这样的话，那么状态变量就会绑定到松散的数据，因为整个应用程序都会重新渲染。如果您使用由 router-dom API 提供的路由器导航，则上下文可以持续存在（除非用户刷新页面）。
另一种可能的方法是将数据存储在浏览器的 localstorage 中，因此组件不必通过 props 传递值，而是必须从存储中读取值。
@MujeebQureshi 感谢您的回复，我正在使用 react-router-dom，它是来自 react-router-Dom 的 BrowserRouter 中的简单路由。

标签： reactjs react-router frontend react-context 2d-context-api

【解决方案1】：

如果您使用锚标记（即 window.location）实现路由，则整个页面将刷新，包括您的上下文，将其设置回默认状态，正确的方法是使用 react 中的 Link 标记-router-dom，这里是一个例子；

import { Link } from "react-router-dom";

<Link to="/home">Home</Link>

【讨论】：