Маршрутизация снаружи компонента Route

Question

У меня есть приложение, в котором я использую реагирующий маршрутизатор, и я не могу понять, как изменить маршрут в этом случае использования. Вот как структурирован мой код:

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router>
    <Panels />
    <Route path="/view" render={()=> <MyComponent />} />
    <Route path="/about" render={()=> <MyOtherComponent />} />
</Router>

Внутри <Panels> есть несколько вкладок, которые я хочу изменить.

<Tabs defaultActiveKey="1" onChange={}> 
    <TabPane tab="Tab 1" key="1" > 
       <Somecomponent /> 
    </TabPane> 
    <TabPane tab="Tab 2" key="2"> 
      Test me 
    </TabPane>
  </Tabs> 

Это вкладки antd, поэтому они не имеют интерактивного компонента, в который я могу вставить <Link>, а <Panels> находится за пределами <Route>, поэтому я не уверен, что могу получить доступ история объекта в противном случае. Я мог бы поместить панели в каждый <Route>, но это было бы очень плохо.

Каким образом я должен идти по этому поводу?

Answer 1

Наконец-то понял это.

import { withRouter } from 'react-router-dom'
...
<Tabs defaultActiveKey="1" onChange={(key)=> this.props.history.push(`/${key}`)}> 
    <TabPane tab="Tab 1" key="1" > 
       <Somecomponent /> 
    </TabPane> 
    <TabPane tab="Tab 2" key="2"> 
      Test me 
    </TabPane>
</Tabs> 
...
export default withRouter(Panels);

упаковка экспорта с withRouter дает компоненту доступ к объекту истории для проталкивания и чтения маршрутов. Сначала я видел это решение, но не смог заставить его работать. Оказывается, это потому, что я импортировал withRouter из react-router, а не react-router-dom, поэтому я загружал не в ту историю.