bugfix> reactjs > 投稿

クリックするとユーザーを別のページに移動するアイテムのリストがあります。
問題は、宛先ページがこのリストアイテムページに存在しないある種のIDを必要とすることです。だから私はこれをします:
リストページ:

{items.map(item=>{
    return <Link to="/resolver/${item}">{item}</Link>
})

リゾルバーページ:

componentDidmout(){
   const {keyword} = this.props.match.params;
   this.props.searchOnServer(keyword)
}
componentDidUpdate(pervProps){
   //after checking some conditions:
   const {redirect_id} = this.props.server_response;
   this.props.history.push(`/some/path/${redirect_id}`)
}

次に、宛先ページはそのIDを使用して製品関連データをフェッチできます。

componentDidMount(){
   const {id} = this.props.match.params;
   fetchSomeStuff(id);
}

さて、上記の解決策は完全にうまく機能します、私が持っている唯一の問題は、ユーザーが宛先ページの戻るボタンをクリックすると、それがリゾルバーページに戻り、サイクル全体が最初からやり直されることです。どうやってスキップリゾルバページに戻り、リストページに戻ります。

回答 1 件
  • リゾルバーページからリダイレクトを実行できるため、ユーザーが新しいページから戻るボタンを押すと、リゾルバーパスの前のページに戻ります。

    変化する history.pushhistory.replace

    歴史

    componentDidUpdate(pervProps){
       //after checking some conditions:
       const {redirect_id} = this.props.server_response;
       this.props.history.replace(`/some/path/${redirect_id}`)
    }
    
    

あなたの答え