如何使用 React Router 维护路由之间的状态？答案

【问题标题】：How to maintain state between routes with React Router?如何使用 React Router 维护路由之间的状态？
【发布时间】：2016-09-18 15:28:15
【问题描述】：

我的应用程序有一个带有 4 个选项卡的选项卡组件。每个选项卡的内容都设置为单独的组件。我正在用 4 条不同的路线替换选项卡。我摆脱了选项卡并使用react-router 设置了 4 条路由，每个路由用于 4 个组件。

选项卡的内容在导航到选项卡和从选项卡导航时将保持其状态。例如，假设用户在一个选项卡中滚动到列表底部。如果用户导航到不同的选项卡并返回，列表将保持滚动到底部。

我无法通过路由实现这种行为。我注意到，当我从一条路线导航到另一条路线时，组件会被重新实例化（而不仅仅是重新渲染）。

我想实现类似标签的行为。我知道有一个名为 UI-Router-Extras for Angular 的库，它提供深度状态重定向。但是我找不到类似的 React 选项。我已经尝试过react-router 和react-router-component，并且都在路由激活时重新实例化了一个组件。

是否有解决方案来实现 React 中路由的这种行为？

【问题讨论】：

我想我已经在这里回答了这个问题。看一看：stackoverflow.com/a/67948774/10146901

标签： reactjs user-interface react-router navigation react-router-component

【解决方案1】：

就我个人而言，在这种情况下，我选择放弃 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，你也可以把它放在 reducer 中:)

【解决方案2】：

您有两个选择，使用 Redux，或基于选项卡显示/隐藏组件。

这是一个显示/隐藏组件的示例

{this.state.showAboutMe ? <AboutMeComponent navigation={this.props.navigation} props={this.props.user} /> : undefined}

【讨论】：