使用反应路由器将对象传递到react组件

Question

这是我的routes.js，我在将userProfiles收到的数据传递给该用户的userProfileDetail时遇到问题。我不想在userProfileDetail中进行其他API调用，因为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={中的

} /> /个/ / {{user._id} userProfiles，但如何从userProfiles传递到userProfileDetail？

Answer 1

您必须再打一次电话

如果某人刷新userProfileDetail页面，该怎么办？如何获得任何数据？您无法假设用户已拥有哪些数据。你必须确保任何页面都可以自己构建。

使用状态管理

在整个应用中分享数据的一个好方法是实现像redux这样的状态管理系统，这样您就可以从应用中的任何组件调用您拥有的任何数据，从而使传递的数据变得多余。

Answer 2

您可以使用react-router的state。

在此链接中将对象设置为to道具。

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

现在您可以从location。

访问此状态

location.state.userProfiles

另请注意，如果用户通过在浏览器中直接键入URL或重新加载页面来导航页面，state将没有任何值。因此理想的解决方案是调用API，如果user._id没有值，则使用state加载这些数据。