Javascript 历史推送后使用状态重置

我们有一个侧边栏，它使用history.push在SPA中从一个页面导航到另一个页面。发生这种情况时，上下文提供程序将被保留，但pages useState将返回其默认值。我查看了Link的代码，它没有做任何与历史推送不同的事情

我们可以重写使用链接，但我读到历史推送应该可以工作，这就是链接所做的一切。下面的代码使用route render，但也像其他代码一样，仅使用JSX进行了尝试

     <Router history={history}>
        <div className={classes.body}>
          <div className={classes.root}>
            <Drawer appConfig={appConfig} />
            <div style={{ width: '100%', height: '100vh', overflow: 'hidden' }}>
              <Switch>
                <Route type="public" path="/dialogs" exact render={Markets} />
                <Route type="public" path="/notifications" exact>
                  <Notifications />
                </Route>
                <Route type="public" path="/:marketId" exact>
                  <Market />
                </Route>
                <Route type="public" path="/:marketId/about" exact>
                  <About />
                </Route>
                <Route>
                  <PageNotFound />
                </Route>
              </Switch>
            </div>
          </div>
        </div>
      </Router>

function Markets(props) {
  const { intl } = props;
  const { marketDetails, loading } = useAsyncMarketContext();
  const [addMode, setAddMode] = useState(false);

  function toggleAdd() {
    setAddMode(!addMode);
  }

  function onMarketSave() {
    toggleAdd();
  }

  return (
    <Activity
      title={intl.formatMessage({ id: 'sidebarNavDialogs' })}
      isLoading={loading}
      titleButtons={<IconButton onClick={toggleAdd}><AddIcon /></IconButton>}
    >
      <div>
      {!addMode && <MarketsList markets={marketDetails} /> }
      {addMode && <MarketAdd onCancel={toggleAdd} onSave={onMarketSave} />}
      </div>
    </Activity>
  );
}

功能市场（道具）{
常量{intl}=props；
const{marketDetails，loading}=useasynchmarketcontext（）；
const[addMode，setAddMode]=useState（false）；
函数toggleAdd（）{
setAddMode（！addMode）；
}
函数onMarketSave（）{
toggleAdd（）；
}
返回(
{！addMode&&}
{addMode&&}
);
}

---

如果addMode为true，则在单击“到/通知”并返回时，它将保留其值。

当您从

市场

转到

通知

时，您将卸载第一个并呈现第二个。返回时，您重新装载

Markets

，其初始化状态为

false

，因此这是一种预期行为。如果你想在页面之间保持这种状态，你应该在父组件中设置它。@GaëlS no你说的不正确，我的坏，我阅读

组件

，而不是

在
路线
更新中渲染

-好吧-基本上我必须以某种方式隐藏未使用的组件，否则它们将从dom中删除。只需将状态放在组件树中，并将其传递给市场。当你从

市场

转到

通知

，卸载第一个，然后渲染第二个。返回时，您重新装载

Markets

，其初始化状态为

false

，因此这是一种预期行为。如果你想在页面之间保持这种状态，你应该在父组件中设置它。@GaëlS no你说的不正确，我的坏，我阅读

component

而不是

render

在

Route

更新中-好吧-基本上我必须以某种方式隐藏未使用的组件，否则它们将从dom中删除。只需将状态放到components树中并将其传递给Markets即可。