反応ルータを使用して反応コンポーネントにオブジェクトを渡します

Question

これは私のroutes.jsです。userProfilesで受信したデータをそのユーザーのuserProfileDetailに渡す際に問題があります。私がナビゲートする方法userProfiles

const routes = { 
    component: Base, 
    childRoutes: [ 
    { 
     path: '/profiles', 
     getComponent: (location, callback) => { 
     callback(null, userProfiles); 
     } 
    }, 

    { 
     path: '/profile/:profile_id', 
     getComponent: (location, callback) => { 
     callback(null, userProfileDetail); 
     } 
    } 
    ] 
}; 

での通話がちょうど

<Link to={ /profile/${user._id}経由ですでに存在しているので、私は、userProfileDetailに別のAPI呼び出しを行うにはしたくない} />userProfilesでは、どのようにuserProfilesからuserProfileDetailに渡すのですか？

Answer 1

あなたは人がuserProfileDetail上でページをリフレッシュする場合はどのような別のコール

をしなければなりませんか？どのようにデータを取得するのですか？ユーザーが既にどのデータを持っているかについては仮定することはできません。任意のページを単独で構築できることを確認する必要があります。

使用状態管理

アプリ間でデータを共有するための素晴らしい方法は、あなたがこの冗長ようなデータの受け渡しをするあなたのアプリに任意のコンポーネントからあなたが持っている任意のデータを呼び出すことができる方法reduxのような状態管理システムを実装することです。

Answer 2

反応ルータのstateを使用できます。

このようにオブジェクトをtoに設定してください。

<Link to={{ 
    pathname: `/profile/${user._id}`, 
    state: { userProfiles: userProfiles } 
}}/> 

これでlocationからこの状態にアクセスできます。

location.state.userProfiles 

また、ユーザが直接ブラウザにURLを入力してページを移動したり、ページをリロードする場合stateは任意の値を持っていないことに注意してください。したがって、stateに値がない場合は、user._idを使用してこれらのデータをロードするのが理想的なソリューションです。