Reactjs сохраняет вкладку Material Ui при обновлении

Question

Привет! Я использую вкладку пользовательского интерфейса React Material и заметил, что при обновлении веб-сайт не оставляет выбранной вкладку.Как я могу предотвратить это?Это код типа вкладки пользовательского интерфейса

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

Просто установите значение для вашей вкладки, которое должно делать работу

<Tab value={0} label="Item One" />
<Tab value={1} label="Item Two" />
<Tab value={2} label="Item Three" />

Answer 2

Это связано с тем, что при обновлении страницы компонент повторно инициализируется, для state.value устанавливается значение 0.

Метод onChange должен хранить выбранную вкладку где-нибудь, например, в URL-адресе страницы.

В конструкторе компонента или в componentDidMount значение state.value необходимо установить из хранилища, в котором оно было установлено ранее.