React-router の <Route> で異なる props を使用して同じコンポーネントをレンダリングする方法

Question

いくつかの小道具を必要とする News コンポーネントがあり、<Link /> をクリックするたびにそれを作成し、対応するカテゴリの小道具を再レンダリングしたいと考えています。 URL は更新されますが、コンポーネントは再レンダリングされません。

リーリー

これらは私のものです <NavLink />

ああああ

Answer 1

一意の key を element コンポーネントに追加するだけです。 endcphpcn は、いくつかの異なる props を使用して毎回再レンダリングされます。

リーリー

Answer 2

react-router/react-router-dom 複数のルートでレンダリングする場合でも、同じコンポーネント インスタンスをインストールしたままにしてレンダリングを最適化します。これはパフォーマンスの最適化であり、異なる props 値を渡すためだけに同じコンポーネントをアンインストールして再インストールするプロセスを節約します。つまり、ルートが変更されてもコンポーネントはマウントされたままとなり、依存関係プロパティ値の更新は componentDidUpdate ライフサイクル メソッドまたは useEffect フックで処理される必要があります。

渡されるルーティングと props に基づくと、この News コンポーネントは category props にいくつかの依存関係を持っています。これは、私が確認した唯一の props が異なるためです。

News コンポーネントにはおそらく useEffect フックがあり、この category プロパティに依存して、この異なるプロパティ値に基づいて異なるデータを実行/ロードする必要があります。

＃＃＃例：＃＃＃ リーリー

News

が React クラスに基づくコンポーネントの場合、componentDidUpdate メソッドを実装する必要があります。 リーリー さらに、これに基づいて、

category

と URL パスも一致しているように見えるため、ほとんどの場合 :Category を使用して単一のルートをレンダリングすることで、コードをよりわかりやすくすることもできます。をルート パス パラメーターとして使用し、同じ useEffect フック ロジックを適用して、カテゴリ値に依存するロジックを再実行します。 ＃＃＃例：＃＃＃ リーリー リーリー 同様に、

News

がクラス コンポーネントの場合は、適切な

componentDidUpdate

ライフサイクル メソッドを使用し、カスタム withRouter 上位コンポーネント category ルート パス パラメーターが props として挿入されるようにします。 News コンポーネント

での React キーの使用は、コンポーネントのアンマウントと再マウントなどの実際の逆アセンブリを伴うため、最後の手段としてのみ使用してください これには、単に更新された prop 値を使用してコンポーネントを再レンダリングするよりも多くの作業が必要になります。