Как сохранить вкладки в ReactJS, когда я использую Material-ui? - PullRequest
Новая
       9

Как сохранить вкладки в ReactJS, когда я использую Material-ui?

0 голосов
/ 29 сентября 2019

В этом примере, взятом из Material-UI, я не знаю, как сохранить вкладку выбранной после обновления веб-страницы.Есть один и тот же вопрос, который был задан ранее.Однако это не было ответа.Может кто-нибудь дать мне несколько подсказок или пример кода? 

  return (
    <div className={classes.root}>
      <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>
    </div>
  );
}

code exampe введите описание изображения здесь

1 Ответ

0 голосов
/ 29 сентября 2019

Вы можете создать свой маршрут для каждой вкладки и сохранить эту информацию в маршруте.

Пример маршрута: - 

https://uz2qz.csb.app/tabs/1 //tab index 1
https://uz2qz.csb.app/tabs/2 //tab index 2
https://uz2qz.csb.app/tabs/3 //tab index 3

Опция 1: -

При отображении страницы извлеките индекс вкладки (если есть), используя window.location из URL-адреса, и используйте эту информацию для установки текущего индекса вкладки и передачи его компоненту Tabs в качестве подпорки.

Вариант 2: -

Использование React Router.Создайте маршрут с переменной пути, используя компонент Route

Пример React Router 

<Switch>
  ...
  <Route path="/tabs/:tabIndex" component={TabsComponent}/>
  ...
</Switch>

TabsComponent.js 

    class TabsComponent extends React.Component {

      render() {
        const { match } = this.props;
        const { params } = match;
        const tabIndex = params.tabIndex ? params.tabIndex : 0;

        return (
          <div className={classes.root}>
            <AppBar position="static">
              <Tabs value={tabIndex} 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>
          </div>
        );
      }
    }
...