React router - 如何在没有查询参数或Redux的情况下发送道具？

Question

我想将数据发送到另一条路线，但不想在查询参数中发送。

我不希望每条路线都有新的商店，我也不想要一个只是将所有路线/参数分别保存在它们被发送/消费的地方的商店。

是否有标准方法为即将到来的路线指定道具？

Answer 1

我在react-router location api docs上找到了解决方案。

this.props.router.push({
  pathname: '/view-user',
  state: { userId }
});

对于插页式独立模态页面来说，这似乎很棒。

如果状态丢失，可能需要指定一个后备，但是还没有那么远。

if (!this.props.location.state) this.props.router.goBack();

或

const locations = this.props.location.pathname.split('/');
// do something 
this.props.route.push(locations.join('/'));

Answer 2

如果您没有在查询参数中发送信息，那么您可以将其放在也可以与路径关联的其他类型的商店中。

您可以使用自己的函数包装router.push（）调用，该函数需要传递一个额外的对象。有点像...

function navigateTo(url, extraData) {
  if (extraData !== undefined) { 
    saveExtraDataForRoute(url, extraData);
  }
  router.push(url);
}

在react-router中，有一个与路由关联的onEnter prop，指定要调用的函数。此函数中的代码可以检索额外的数据并执行您想要执行的任何操作。

function onMyScreenEnter() {
  const extraData = getExtraDataForRoute(url);
  goCrazyNutsWithYourExtraData(extraData);
}

您提供了两个函数saveExtraDataForRoute（）和getExtraDataForRoute（）。他们可以使用您的商店（例如Redux），设置单个对象的值，或使用LocalStorage。但实质上，为了保存数据以便以后可以通过URL检索，您可能会说：

extraDataStore[url] = extraData;

您可能希望研究的另一件事是使用带反应路由器的POST方法。我还没有做到这一点，我不确定它的效果如何。这是一个链接：How to Handle Post Request in Isomorphic React + React Router Application