子組件的動態路由

Question

我的情況與路由有關。 我的應用中有n個用戶。 在無序列表中列出。 每個li元素都是一個Link ：

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

路線代碼：

{
  path: 'user/:id',
  name: 'userDetails',
  getComponent(nextState, cb) {
    import('app/UserDetails')
      .then(loadModule(cb))
      .catch(errorLoading);
  },
}

Okey，所以我想將user對象傳遞給組件，該對象包含需要在用戶詳細信息組件中顯示的所有信息。

如您所見，我通過在Link元素內傳遞to prop的state參數to完成此操作。 它工作正常， 但是當我將直接鏈接復制並粘貼到新選項卡中的組件時失敗。

/user/1 -page無法加載，因為state undefined （未通過Link正確傳遞。

我的問題是 ：如何正確執行？ 我想這不是最正確的方法。

請注意 ，我可以將其與redux連接起來，從props- id獲取param ，然后在整個 users對象數組中搜索id === 1特定對象，但這有意義嗎？ 我肯定必須有一些更簡單的方法來修復它。 先感謝您！

Answer 1

應將ReactRouter狀態對象用於與應用范圍內的位置轉換相關的臨時數據。 這是文檔中的一個完美示例：

狀態：{fromDashboard：true}）

這只是一個簡單的標志。 臨時狀態對於您的應用程序全局狀態而言並不是很重要。

當您直接打開URL或從其他站點打開URL時，不會創建任何過渡，因此狀態對象不存在，您的解決方案將永遠無法工作。

您的第二種方法是正確的。

不要混淆模塊的職責。 React路由器負責路由，另一個模塊應提供狀態。 將某些數據注入路由器的可能性並不意味着您應該將其用作數據提供者。 它使得難以調試，記錄和模擬數據以進行測試。

問自己為什么要使用Redux？ 可能保持您的狀態整潔，可讀和可預測 。 那么，為什么要避免通過一些巧妙的技巧來使用它呢？ 在您的示例中，您已經創建了與應用程序狀態不同步的完全分離的狀態。 這種方法會咬你。

您可以使用高階組件來管理狀態和傳遞道具（但總是從一個單一的事實來源（可能是Redux ...）），或者只使用更簡單或更抽象的狀態管理器。