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>之外，所以我不确定否则，我能够访问历史对象。我可以把面板放在每个<div class="row"> <div class="col-md-4" style="background:red;">logo</div> <div class="col-md-4" style="background:blue;">content</div> <div class="col-md-4" style="background:yellow;">content+imgs</div> </div> </div>中，但这真的很糟糕。

我应该采取什么方式解决这个问题？

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，所以我在错误的历史记录中加载。

从Route组件外部进行路由

1 个答案: