Question

我正在使用Ant设计面包屑。我正在尝试使用链接并推URL来更改页面，我可以看到URL发生了变化，但是页面没有变化。

我尝试使用链接，然后为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>

即使我尝试不使用Breadcrumbs组件，但它仍未更改页面。

我希望页面随URL更改而更改。预先谢谢你。

Answer 1

尝试一下

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



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

Answer 2

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

反应类组件为此具有生命周期功能：componentDidUpdate。

发生更新后，将立即调用
componentDidUpdate（）。初始渲染未调用此方法。

使用此机会在组件更新后在DOM上进行操作。只要您将当前的道具与以前的道具进行比较，这也是一个进行网络请求的好地方（例如，如果道具未更改，则可能不需要网络请求）。

react文档引用，请参阅：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
  }
}

链接更改URL，但页面不更改

2 个答案: