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

Вопрос задавался много раз прежде, но никогда не для React Bootstrap: как сохранить активную вкладку при перезагрузке страницы? Другими словами, когда пользователь щелкает вкладку в панели навигации, легко добавить хеш к 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 ответ


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

Например,

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

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

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 или просто в любом другом месте, которое вы предпочитаете.

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


Есть идеи?

10000