Реагировать Bootstrap: сохранить текущую вкладку при перезагрузке страницы - PullRequest
Новая
       59

Реагировать Bootstrap: сохранить текущую вкладку при перезагрузке страницы

0 голосов
/ 24 марта 2020

Вопрос задавался много раз ранее, но никогда не для React Bootstrap: как сохранить активную вкладку при перезагрузке страницы? Другими словами, когда пользователь щелкает вкладку в панели навигации, легко добавить ha sh к URL текущей страницы. Однако при перезагрузке страницы eventKey не соответствует URL-адресу. Я просмотрел следующие документы по РБ и не нашел пропеллер, предназначенный для этой цели:

Вот мой код: 

<Card className="m-auto w-100 w-xl-75">
  <Tab.Container id="tabs">
    <Card.Header>
      <Nav variant="tabs">
        <Nav.Item>
          <Nav.Link href="#licenses" style={{ outline: 'none' }}>Licenses</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#releases" style={{ outline: 'none' }}>Releases</Nav.Link>
        </Nav.Item>
      </Nav>
    </Card.Header>
    <Card.Body>
      <Tab.Content>
        <Tab.Pane eventKey="licenses" id="licenses">
          <Licenses licenses={licenses} />
        </Tab.Pane>
        <Tab.Pane eventKey="releases" id="releases">
          <Releases releases={releases} />
        </Tab.Pane>
      </Tab.Content>
    </Card.Body>
  </Tab.Container>
</Card>

1 Ответ

0 голосов
/ 24 марта 2020

Я не совсем уверен, что понимаю ваш вопрос, но, учитывая контекст, я бы посоветовал вам сохранить выбранную пользователем вкладку в одном из кешей, сеансах внешнего интерфейса.

Например,

Используя хранилище сеансов:

Вы можете сохранить выбранный ключ следующим образом: 

const storeSelection = (selection) => localStorage.setItem('tabSelection', selection);
<Nav.Item>
    <Nav.Link href="#licenses" style={{ outline: 'none' }} onSelect={{this.storeSelection('licenses')}}>Licenses</Nav.Link>
</Nav.Item>

Затем вы можете просто выбрать эту вкладку onComponentDidMount или любое другое место, которое вы предпочитаете.

Я предполагаю, что это состояние то, что вы хотите сохранить - это скорее состояние, которое вы хотите сохранить на стороне внешнего интерфейса.

...