我的应用程序有一个带有 4 个选项卡的选项卡组件。每个选项卡的内容都设置为单独的组件。我正在用 4 条不同的路线替换选项卡。我去掉了选项卡，习惯于react-router设置 4 条路由，4 个组件中的每一个都有一个路由。
在导航到选项卡和从选项卡导航时，选项卡的内容将保持其状态。例如，假设用户已滚动到一个选项卡中列表的底部。如果用户导航到不同的选项卡并返回，列表将保持滚动到底部。
我无法通过路由实现这种行为。我注意到当我从一条路线导航到另一条路线时，组件会重新实例化（不仅仅是重新渲染）。
我想实现类似选项卡的行为。我知道有一个名为 UI-Router-Extras 的 Angular 库，它提供了深度状态重定向。但是我找不到 React 的类似选项。我已经尝试过react-router，react-router-component并且当它的路由变为活动时重新实例化一个组件。
是否有解决方案可以为 React 中的路由实现这种行为？
就我个人而言，在这种情况下，我选择放弃 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>
您有两个选择，使用 Redux 或基于选项卡显示/隐藏组件。
这是显示/隐藏组件的示例
{this.state.showAboutMe ? <AboutMeComponent navigation={this.props.navigation} props={this.props.user} /> : undefined}