使用 navigate('/path') 后重新渲染组件

Posted 2023-02-23

【中文标题】使用 navigate(\'/path\') 后重新渲染组件

【英文标题】：Re-render a component after using navigate('/path')使用 navigate('/path') 后重新渲染组件

【发布时间】：2021-12-11 16:52:49

【问题描述】：

在这种情况下，当用户登录时，他将被重定向到消息页面。我希望在此之后呈现标题组件，但它不会发生。如果 header 被渲染，链接会改变，但如果不渲染，链接将保持不变，直到页面被刷新...... 我该怎么办？！

login.js：

const login = async (e) => 
    e.preventDefault();
    const result = await (
      await fetch("/portfolio/login", 
        method: "POST",
        credentials: "include",
        headers:  "Content-Type": "application/json" ,
        body: JSON.stringify(data),
      )
    ).json();
    if (result.accessToken) 
      navigate("/message");    //imported from @reach/router
     else console.log(result.error);
    if (result.message) setRes(result.message);
  ;

header.js：

const Header = () => 
  const [tokenObj, setToken] = useState('');
  
  useEffect(() => 
    fetch('/portfolio/verify', method : "GET")
    .then((res)=>
      if(res.ok) return res.json(res);
    )
    .then((jsonRes)=> 
      if(jsonRes.token) setToken(jsonRes.token)
    );
  , [tokenObj]);

  let lastNavLink;
  let lastNavHref;
  if(tokenObj) 
    lastNavLink = 'Messages';
    lastNavHref = '/message'
   else 
    lastNavLink = 'Login';
    lastNavHref = '/login';
  
    return <a href=lastNavHref> lastNavLink </a> //dynamic link
;

【参考方案1】：

在进入解决方案之前，您需要牢记两点：

组件根据 State 或 Prop 更改重新渲染，就是这样。 您必须在浏览器中使用localStorage 之类的方式保存您的登录信息，这样无论是否重新加载您的页面，您都可以知道用户是否已登录。

所以回来，您必须根据登录信息（可以是任何内容，但很可能是用户信息和/或访问/身份验证令牌）有条件地呈现链接，您将在登录后将其保存在本地浏览器存储中但是有一个问题，从localStorage 保存和取回登录数据是不够的，因为我们需要状态或道具形式的数据，因为只有这样组件才会对更改做出反应。因此，为了应对这种情况，您必须以某种方式将 localStorage 中的数据与 state/prop 同步。

要实现这一点，可以使用redux、react-redux 和redux-persist 的组合来解决这个问题。所以基本上它的工作方式与普通 redux 流程的工作方式相同，但主要更改将通过通过redux-persist 持久化您的登录信息来完成。一旦你用redux-persist 包装你的登录reducer，它会自动将你的登录reducer 与localStorge 保持/同步。你可能会找到很多这方面的例子。因此，您将在收到带有相关数据作为其参数（将保存在存储中）的响应后发送您的登录操作，其余的将由redux 处理。之后，您只需从标题中的redux 获取您的登录状态，并根据该状态有条件地呈现您的链接。

这是一种可能的解决方案，但无论如何您都知道它是如何工作的。如果你愿意，你可以使用Context 而不是Redux，但无论如何你明白了。