历史记录推送后useState重置

Question

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

我们可以重写以使用Link，但是我读到历史记录推送应该起作用，而这正是Link所做的一切。下面的代码使用了路由渲染，但也像其他代码一样尝试了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>
  );
}

期望的是，如果addMode为true，则单击/ notifications并返回时将保留其值。