Question

我发现了这个问题，它正好描述了我在寻找的东西......

Pass object through Link in react router

是否可以通过react-router中的链接组件传递对象？

类似的东西：

<Link to='home' params={{myObj: obj}}> Click </Link>

就像我将道具从父组件传递给子组件一样。

如果不可能，实现这一目标的最佳方法是什么：   我有一个React + Flux应用程序，我用一些数据渲染表。我想要做的是当我点击其中一行时，它将带我到这一行的一些细节组件。该行包含我需要的所有数据，因此我认为如果我可以通过Link传递它将会很棒。

另一个选项是传递url中行的id，在details组件中读取它，并通过ID从store中请求数据。

不确定实现上述目标的最佳方式是什么......

我同意作者的结论，意思是：我们应该传递一个id，而不是传递一个对象。然而，我正在努力寻找下一个应该执行查找的组件，可能在我定义mapDispatchToProps的onload方法中。

但是，我不知道如何从那里访问状态以查看对象是否处于状态，因此如果状态不是，我可以从api调用中检索它。这属于这里还是属于行动？如果它在动作中，我该如何实现它。这似乎是一个非常基本的模式，我错过了一些东西。

Answer 1

您可以将其与redux-thunk一起使用，然后就可以对路由器采取措施。

我的意思是这样的

export const boundAllStreams = (nextState, replaceState) => reqStreams(nextState.params.game);

所以你可以看到我使用params游戏并用

改变状态

export const reqStreams = game => {

  const promise = new Promise((resolve, reject) => {
    request
      .get(`${config.ROOT_URL}/${game}&client_id=${config.API_KEY}`)
      .end((err, res) => {
        if (err) {
          reject(err);
        } else {
          resolve(res.body.streams);
        }
      });
  });

  return {
    type:    types.RECEIVE_STREAMS,
    payload: promise
  };

};

这是我的减速机，我从路由器动作中获取了参数。

在您需要执行此类操作后，您可以绑定您的操作并将其设为对象。

const boundRouteActions = bindActionCreators(routeActions, store.dispatch);

最后在路由器中，您可以使用react-router

中的onEnter api调度操作

      <Route path=":game">
        <IndexRoute
          component={StreamsApp}
          onEnter={boundRouteActions.boundAllStreams} />
    </Route>

希望能帮到你;）。我知道我只是告诉你代码，但我确信这可以帮助你弄清楚如何实现这个;）

通过反应路由器中的链路传递对象

1 个答案: