Javascript 有没有办法让选项卡的状态保持在React状态？

我使用react router dom在ReactJS项目中的选项卡之间导航

在应用程序组件中，我有：

...
 <Navbar collapseOnSelect id="topBar" bg="white" variant="light" sticky='top' expand="xl">
                    <Navbar.Brand href="/"></Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav"/>
                    <Navbar.Collapse>
                        <Nav justify className="textFontTabs textBig mr-auto" variant="tabs" defaultActiveKey="/"
                             activeKey={history.location.pathname}>
                            {tabs.map(tab =>
                                (<Nav.Link as={Link} key={tab.name} to={tab.pathname}>{tab.name}</Nav.Link>))
                            }
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </>
            <Switch>
                <Route exact path="/" render={() => <Home/>}/>
                <Route path="/configurator" render={() =>
                    <Configurator contentHeight={contentHeight}/>}/>
            </Switch>
...

。。。
{tabs.map（tab=>
（{tab.name}））
}
}/>
}/>
...

我的问题是，我将Configurator组件中的大部分数据存储在状态挂钩中，当我更改选项卡（例如Home）并再次返回Configurator时，存储在那里的所有数据都设置为默认值。有没有办法记住Configurator中的数据？

---

我发现我可以使用react redux，但我认为它太小，无法使用。

不。更改路由时，

Configurator

组件将卸载，并且不会记住状态变量值。你需要考虑一个更全球化的国家管理体系。React-redux很棒，但是如果您觉得项目太小，您可以将所有这些状态变量和设置器保留在呈现

Navbar

的任何组件中，并将它们作为道具传递给

配置器

。或者可以使用react上下文对象卸载该状态。但按照现在设置的方式，状态不会通过重新加载而持久。

不。更改路由时，

Configurator

组件将卸载，并且不会记住状态变量值。你需要考虑一个更全球化的国家管理体系。React-redux很棒，但是如果您觉得项目太小，您可以将所有这些状态变量和设置器保留在呈现

Navbar

的任何组件中，并将它们作为道具传递给

配置器

。或者可以使用react上下文对象卸载该状态。但按照您现在设置的方式，状态不会通过重新加载而持久。

一种方法是提升状态

其思想是，不让Configurator组件拥有状态，而是将状态保留在父组件中。Configurator从道具中获取需要显示的所有数据，并使用代理在值更改时通知父级

---

如果父组件保持状态是没有意义的，那么您可以考虑像服务器一样在别处保留状态，或者

一种方法是提升状态。p> 其思想是，不让Configurator组件拥有状态，而是将状态保留在父组件中。Configurator从道具中获取需要显示的所有数据，并使用代理在值更改时通知父级

如果父组件保持状态是没有意义的，那么您可能会考虑将其他状态保留到服务器或./p>