单击浏览器后退按钮时，选项卡状态如何处理？

Question

我有一个关于路由器标签的问题。

Suppose I have 2 tabs say Tab1, tab2

When I click Tab1, displays content related to Tab1 and url is routed to /tab1 and the other tab also behave the same.

I'm storing the state of the tab in local storage and upon clicking each tab the local storage is updated.

However, when browserback button is clicked , the url and content changes but the tab state will not change. How do I handle the state of the tabs when browser back button is clicked?

I've used react-tabs-redux for my code, Is this a good approach? Is there any other node package I can use for tabs? see below

https://www.npmjs.com/package/react-tabs-redux

class TabComponent extends React.Component {

  changeSelectedTab = selectedTab => {
  localStorage.setItem('activeTab', selectedTab)
  }
  render() {
    const activeTab = localStorage.getItem('activeTab')
    return (
         <Tabs
          name="sampletabs"
          selectedTab={activeTab}
          onChange={this.changeSelectedTab}
          >
          <div className="tab-link-data">
            <TabLink to="tab1">
              <a href="/tab1">tab1</a>
            </TabLink>
           <TabLink to="tab2">
              <a href="/tab2">tab2</a>
            <
          </div>
        </Tabs
    )
  }
}



Expected: When browser back button is clicked react tab should change accordingly

Actual: Only the content and  url changes, tab state is not changed

请建议单击浏览器的后退和前进按钮时如何处理选项卡的状态。