如何使用React Router维护路由之间的状态？
如何使用React Router维护路由之间的状态？
提问于 2016-05-21 19:34:20
我的应用程序有一个包含4个选项卡的选项卡组件。每个选项卡的内容都设置为单独的组件。我用4条不同的路线替换了标签。我去掉了选项卡，使用react-router设置了4个路由，每个路由对应4个组件。
当导航到选项卡或从选项卡导航时，选项卡的内容将保持其状态。例如，假设用户在一个选项卡中滚动到列表的底部。如果用户导航到不同的选项卡并返回，列表将保持滚动到底部。
我不能通过路由来实现这种行为。我注意到，当我从一条路线导航到另一条路线时，组件被重新实例化(而不仅仅是重新呈现)。
我想要实现类似标签的行为。我知道有一个叫做UI-Router-Extras的Angular库，它提供了深度状态重定向。但我找不到类似的React选项。我尝试过react-router和react-router-component，当组件的路由变为活动状态时，它们都会重新实例化组件。
对于React中的路由，是否有实现此行为的解决方案？
回答 2
Stack Overflow用户
发布于 2016-12-14 00:05:12
就我个人而言，在这种情况下，我选择放弃react-router，并创建一个父组件，其中包含要显示的当前选项卡的状态，而只显示活动的那个。
下面是一个非常简单的例子
<div
style={{display: this.state.currentTab === 'component_a' ? 'block' : 'none'}}
>
<ComponentA />
</div>
<div
style={{display: this.state.currentTab === 'component_b' ? 'block' : 'none'}}
>
<ComponentB />
</div>Stack Overflow用户
发布于 2017-12-17 14:20:02
您有两个选项:使用Redux或基于选项卡显示/隐藏组件。
下面是一个显示/隐藏组件的示例
{this.state.showAboutMe ? <AboutMeComponent navigation={this.props.navigation} props={this.props.user} /> : undefined}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37362370
复制相关文章
相似问题
腾讯云开发者
