reactjs – React Router – 如何实现类似标签的导航？

我是React的新手,使用React开发我的第一个应用程序.我的应用程序有一个带有4个选项卡的选项卡组件,每个选项卡的内容都设置为一个单独的组件.现在我用4种不同的路线替换标签.所以,我摆脱了选项卡并使用react-router来设置4条路由,每条路由一条路由器.

使用选项卡时,选项卡的内容将在导航到其他选项卡并返回时保持其状态.例如,假设选项卡有一个列表,用户已滚动到列表的底部.如果用户导航到另一个选项卡并返回,则列表将保持滚动到底部.这是我的应用程序所需的行为.

但是,我无法通过路由实现此行为.我注意到当我从一个路径导航到另一个路径时,组件被重新实例化(而不仅仅是重新渲染).我可以这样说,因为每当组件的路由变为活动状态时,就会调用组件的构造函数.

我想实现类似标签的行为.我知道对于Angular,有一个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>

原文链接：https://www.f2er.com/react/301039.html

reactjs – React Router – 如何实现类似标签的导航？

猜你在找的React相关文章