0

我正在使用 Ant 设计面包屑。我正在尝试使用链接更改页面并推送 URL，我可以看到 URL 更改但页面没有更改。

我尝试使用 Link，然后为 onClick 创建一个函数，但一切都只是更改了 URL。

Route: 
<Route exact path="/assistant/:wId/skill/xyz/:sid" component={ xyz } />

Tried process 1: 

<Breadcrumb separator=">">
 <Breadcrumb.Item 
     onClick={this.redirectToParam2}>   
     {param2}
 </Breadcrumb.Item>
</Breadcrumb>

redirectToParam2 = () => {            
     this.props.history.push(`/assistant/${wId}/skill/xyz/${sId}`);
 }

Tried process 2:

<Breadcrumb separator=">">
   <Breadcrumb.Item>    
     <Link to= {`/assistant/${wId}/skill/xyz/${sId}`}>
     {param2}
     </Link>
  </Breadcrumb.Item>
</Breadcrumb>

即使我尝试不使用面包屑组件，但它仍然没有更改页面。

我希望页面在 URL 更改后立即更改。先感谢您。

4

2 回答 2

0

尝试这个，

import { Link } from "react-router-dom";



 <Breadcrumb separator=">">
   <Breadcrumb.Item>    
     <Link to= {`/assistant/${wId}/skill/xyz/${sId}`}>
     {param2}
     </Link>
  </Breadcrumb.Item>
</Breadcrumb>
于 2019-09-25T11:15:35.353 回答
0

您遇到的问题是，通过更改用作xyz组件的道具的参数，该组件不会被替换，而是会获得新的属性。由于没有任何变化，我假设您有在构造函数或ComponentWillMount / ComponentDidMount中填充的状态。

React 类组件对此有一个生命周期函数：componentDidUpdate。

更新发生后立即调用componentDidUpdate() 。初始渲染不调用此方法。

当组件更新时，将此作为对 DOM 进行操作的机会。这也是进行网络请求的好地方，只要您将当前的 props 与以前的 props 进行比较（例如，如果 props 没有更改，则可能不需要网络请求）。

引用反应文档，请参阅：https ://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(prevProps) {
  if ((this.props.params.match.sid !== prevProps.params.match.sid) || 
      (this.props.params.match.wid !== prevProps.params.match.wid)) {
    this.populateState(this.props.params.match); //fill your state
  }
}
于 2019-09-25T11:36:30.980 回答