Reactjs 在刷新时保持 Material Ui Tab 被选中

Question

嗨，我正在使用 React Material UI 选项卡，我注意到刷新时网站没有选择选项卡。我怎样才能防止这种情况发生？这是一个代码类型的材料 ui 选项卡

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

  handleChange = (event, value) => {
    this.setState({ 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>
    )
  }
}

Answer 1

这是因为在页面刷新时组件被重新初始化，被state.value设置为 0。

该onChange方法需要将选定的选项卡存储在某个位置，例如页面 URL 中。

在组件构造函数中或componentDidMount需要state.value从先前设置的存储中进行设置。