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

Posted

技术标签:

【中文标题】使用 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 同步。

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

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

【讨论】:

以上是关于使用 navigate('/path') 后重新渲染组件的主要内容,如果未能解决你的问题,请参考以下文章

首次登录/导航后,Angular 6 样式无法正确加载

角度 2 router.navigate 未定义

React Native this.setState() 仅在再次与组件交互后重新渲染

ole32.dll 异常后的 iWebBrowser::Navigate 死锁

当用MVVM navigate回来后,怎么刷新ViewModel?

怎样保存渲图