NextJS页面间跳转时如何保留当前tabIndex的取值

核心思路 #

通过会话级存储sessionStorage保存tab激活索引，页面跳转后回到对应页面时读取存储值恢复tab选中状态，不需要依赖服务端存储或路由参数，实现成本低且不会污染URL。

具体实现步骤 #

• tab切换时存储索引：绑定tab组件的切换事件，每次切换时将当前激活的索引值存入sessionStorage，可给存储key添加页面路径前缀，避免不同页面的tab状态互相冲突。
• 页面挂载时恢复索引：在页面组件的挂载生命周期中读取sessionStorage中对应key的值，若存在有效数值则赋值给tab组件的激活状态变量，不存在则使用默认索引值。

完整代码示例 #

// 若使用Next.js 13+ App Router，需添加下面的客户端指令
// 'use client'
import { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
// 可替换为你项目中使用的任意tab组件
import { Tabs } from 'antd'

export default function TabPage() {
  const router = useRouter()
  // 存储key拼接当前页面路径，避免多页面tab状态冲突
  const TAB_STORAGE_KEY = `${router.pathname}_active_tab_index`
  const [activeKey, setActiveKey] = useState('0')

  // 组件挂载时恢复tab选中状态
  useEffect(() => {
    const savedTabIndex = sessionStorage.getItem(TAB_STORAGE_KEY)
    if (savedTabIndex) {
      setActiveKey(savedTabIndex)
    }
  }, [TAB_STORAGE_KEY])

  // tab切换时存储最新索引
  const handleTabChange = (key) => {
    setActiveKey(key)
    sessionStorage.setItem(TAB_STORAGE_KEY, key)
  }

  return (
    <Tabs activeKey={activeKey} onChange={handleTabChange}>
      <Tabs.TabPane tab="标签1" key="0">标签1对应的内容</Tabs.TabPane>
      <Tabs.TabPane tab="标签2" key="1">标签2对应的内容</Tabs.TabPane>
      <Tabs.TabPane tab="标签3" key="2">标签3对应的内容</Tabs.TabPane>
    </Tabs>
  )
}

效果演示 #

#

内容的提问来源于stack exchange，提问作者Alexander Emelyanov