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

Question

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

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

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

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

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

Answer 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>