1. ホーム
  2. reactjs

[解決済み] ルートパラメータを変更したときにコンポーネントが再マウントされない

2022-08-25 09:33:19

質問

react-routerを使用したreactアプリケーションに取り組んでいます。私は以下のようなURLを持つプロジェクトページを持っています。

myapplication.com/project/unique-project-id

プロジェクトコンポーネントがロードされると、componentDidMountイベントからそのプロジェクトに対するデータ要求をトリガーします。現在、2 つのプロジェクトを直接切り替えて、ID だけがこのように変更される問題に遭遇しています...

myapplication.com/project/982378632
myapplication.com/project/782387223
myapplication.com/project/198731289

componentDidMountが再びトリガーされないので、データはリフレッシュされません。データ要求をトリガーするために使用すべき別のライフサイクル イベント、またはこの問題に取り組むための別の戦略はありますか?

どのように解決するのですか。

リンク先が同じルートでparamが違うだけなら、再マウントではなく、新しいpropを受け取っていることになります。そこで componentWillReceiveProps(newProps) という関数で検索して newProps.params.projectId .

もしデータをロードしようとしているなら、ルーターがマッチを処理する前に、コンポーネントの静的メソッドを使ってデータをフェッチすることをお勧めします。この例をご覧ください。 Reactルーターメガデモ . このようにすると、コンポーネントはデータを読み込み、ルートパラメータが変更されたときに自動的に更新されます。 componentWillReceiveProps .