时间戳

首页 > 解决方案 > 如何通过按钮单击在页面更改/重定向上显示 React Toastbar？

reactjs - 如何通过按钮单击在页面更改/重定向上显示 React Toastbar？

问题描述

我试图在单击按钮时显示 Toast 成功消息，单击按钮后，页面将重定向并显示 Toast 消息。

在第 1 页：

const toSecondPage = () => {
  history.push(`/secondPage`);
};
...
<Button onClick={toSecondPage}>Click Me!</Button>

我能够重定向到 /secondPage 但不知道如何在其上显示 toast 消息。

标签： reactjs

解决方案

使用反应路由器，您可以将状态传递给您重定向到的页面。

<Redirect to={{
            pathname: '/secondPage',
            state: { showToast: true }
        }}
/>

在第二页：

if(this.props.location.state.showToast){
    //show toast
}

使用来自 react router 的链接，而不是带有 onClick 的按钮：

    <Link
  to={{
    pathname: "/secondPage",
    state: { showToast: true }
  }}
>Click me</Link>

推荐阅读