如何让React Material UI Tab在页面刷新后保持选中状态

这个问题我之前做项目的时候也碰到过！核心原因很简单：你现在把选中的Tab索引存在组件内部的state里，页面刷新后组件会重新初始化，state就回到默认的0了，自然就丢失了之前选中的状态。给你两种常用的解决思路，都很容易修改：

方法一：用localStorage持久化状态 #

这种方法会把选中的Tab索引存在用户浏览器的localStorage里，刷新页面时读取这个值来恢复状态，适合不需要分享页面状态的场景。

修改后的完整代码：

class SimpleTabs extends React.Component {
  state = {
    value: 0,
  }

  componentDidMount() {
    // 页面加载时读取localStorage中保存的Tab索引
    const savedValue = localStorage.getItem('selectedTabIndex');
    if (savedValue !== null) {
      this.setState({ value: parseInt(savedValue, 10) });
    }
  }

  handleChange = (event, value) => {
    this.setState({ value });
    // 切换Tab时把当前索引保存到localStorage
    localStorage.setItem('selectedTabIndex', value);
  }

  render() {
    const { classes } = this.props;
    const { value } = this.state;
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Tabs value={value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>Item One</TabContainer>}
        {value === 1 && <TabContainer>Item Two</TabContainer>}
        {value === 2 && <TabContainer>Item Three</TabContainer>}
      </div>
    )
  }
}

关键改动点：

• 在componentDidMount生命周期里读取localStorage的保存值，更新state
• 在handleChange方法里，切换Tab时把当前索引存入localStorage

方法二：用URL Query参数（推荐用于需要分享的场景） #

如果需要支持分享链接（别人点开链接就能看到你选中的Tab），可以把Tab索引存在URL的query参数里，比如?tab=1。这种方法需要依赖react-router的路由能力。

修改后的完整代码：

import { withRouter } from 'react-router-dom';

class SimpleTabs extends React.Component {
  state = {
    value: 0,
  }

  componentDidMount() {
    // 从URL的query参数中读取Tab索引
    const tabIndex = new URLSearchParams(this.props.location.search).get('tab');
    if (tabIndex !== null) {
      this.setState({ value: parseInt(tabIndex, 10) });
    }
  }

  handleChange = (event, value) => {
    this.setState({ value });
    // 更新URL的query参数，保持路由与Tab状态同步
    const searchParams = new URLSearchParams(this.props.location.search);
    searchParams.set('tab', value);
    this.props.history.push({
      search: searchParams.toString()
    });
  }

  render() {
    const { classes } = this.props;
    const { value } = this.state;
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Tabs value={value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>Item One</TabContainer>}
        {value === 1 && <TabContainer>Item Two</TabContainer>}
        {value === 2 && <TabContainer>Item Three</TabContainer>}
      </div>
    )
  }
}

// 用withRouter包裹组件，获取路由相关的location和history props
export default withRouter(SimpleTabs);

关键改动点：

• 导入withRouter并包裹组件，这样组件就能拿到location和history props
• 在componentDidMount里解析URL的query参数，恢复Tab状态
• 在handleChange里更新URL的query参数，确保路由和Tab状态同步

两种方法各有适用场景，根据你的需求选就行！

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