如何在ReactJS中使用Material-UI保持Tabs选中状态（刷新后留存）

嘿，我太懂这个痛点了——每次刷新页面，选中的Tab就跳回默认项确实挺闹心的。这里给你两种实用方案，你可以根据自己的需求选：

方案1：通过URL查询参数保存状态（推荐，支持链接分享） #

这个方法的优势在于，不仅刷新页面能保留选中状态，把链接发给别人，对方打开也会直接看到你选中的Tab，适合需要分享页面场景。

实现思路： #

1. Tab切换时，把选中的索引同步更新到URL的查询参数里；
2. 组件初始化时，从URL的查询参数里读取索引，作为初始选中值；
3. 监听URL变化（比如用户手动修改参数），同步更新Tab选中状态。

代码示例： #

import { useState, useEffect } from 'react';
import { AppBar, Tabs, Tab, Box } from '@mui/material';

// 复用你的TabPanel组件（如果原代码已定义可以直接用）
function TabPanel(props) {
  const { children, value, index, ...other } = props;
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
    </div>
  );
}

function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

export default function PersistentTabs() {
  // 从URL查询参数获取初始选中索引，默认0
  const getInitialTabIndex = () => {
    const params = new URLSearchParams(window.location.search);
    const index = params.get('tab');
    return index ? parseInt(index, 10) : 0;
  };

  const [value, setValue] = useState(getInitialTabIndex);

  const handleChange = (event, newValue) => {
    setValue(newValue);
    // 更新URL查询参数，不触发页面跳转
    const params = new URLSearchParams(window.location.search);
    params.set('tab', newValue);
    window.history.replaceState({}, '', `${window.location.pathname}?${params}`);
  };

  // 监听浏览器前进后退，同步Tab状态
  useEffect(() => {
    const handlePopState = () => {
      const index = parseInt(new URLSearchParams(window.location.search).get('tab'), 10);
      setValue(isNaN(index) ? 0 : index);
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  return (
    <Box sx={{ width: '100%' }}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>Item One</TabPanel>
      <TabPanel value={value} index={1}>Item Two</TabPanel>
      <TabPanel value={value} index={2}>Item Three</TabPanel>
    </Box>
  );
}

方案2：通过localStorage保存状态（适合无需分享链接的场景） #

如果不需要把Tab状态通过链接分享，只是在当前浏览器本地保存，用localStorage会更简单直接。

代码示例： #

import { useState } from 'react';
import { AppBar, Tabs, Tab, Box } from '@mui/material';

function TabPanel(props) {
  const { children, value, index, ...other } = props;
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
    </div>
  );
}

function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

export default function PersistentTabs() {
  // 从localStorage读取初始索引，默认0
  const getInitialTabIndex = () => {
    const savedIndex = localStorage.getItem('selectedTabIndex');
    return savedIndex ? parseInt(savedIndex, 10) : 0;
  };

  const [value, setValue] = useState(getInitialTabIndex);

  const handleChange = (event, newValue) => {
    setValue(newValue);
    // 把选中索引存入localStorage
    localStorage.setItem('selectedTabIndex', newValue.toString());
  };

  return (
    <Box sx={{ width: '100%' }}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>Item One</TabPanel>
      <TabPanel value={value} index={1}>Item Two</TabPanel>
      <TabPanel value={value} index={2}>Item Three</TabPanel>
    </Box>
  );
}

小提醒： #

• 如果你的项目用了React Router，还可以结合路由参数（比如/tabs/1）来实现，逻辑和方案1类似；
• 注意处理parseInt可能返回NaN的情况，一定要给个默认值避免报错。

内容的提问来源于stack exchange，提问作者Sen Hong