React-router:通过路由传递数据

时间:2015-01-22 01:54:06

标签: reactjs reactjs-flux react-router

我正在试图找出通过我的路线传递数据的最佳方式。我知道我可以使用params但是某些类型的数据不属于params。

例如:我有一个显示应用程序列表的索引页面。每个应用程序旁边都有一个按钮,可以将您引导至该应用程序的视图。

我想将应用程序本身传递给Application处理程序。但是,通过params传递整个应用程序是没有意义的。虽然将应用程序标识符传递给params(即:id或:name)

是有意义的

所以我认为我应该这样做的方法是将应用程序标识符传递给params,然后在Application组件中搜索我的ApplicationStore以获取给定标识符的相应应用程序。

但是,通过应用程序本身会不会更容易,更快?有没有办法做到这一点。有没有理由不这样做?

以下是一些代码:

<Link to="showApplication" params={{name: application.name}}>View</Link>

<Link to="showApplication" params={{application: application}}>View</Link>

提前致谢!

2 个答案:

答案 0 :(得分:5)

问题是,当人刷新或以其他方式直接加载网址时,需要显示正确的视图。因为URL只是字符串,所以您需要将路由表示为字符串。您无法(轻松地)将实际应用程序推入网址。

路由器的工作是获取该字符串(URL)并将其映射到实际代码(处理程序),并提供任何额外数据(params,query和/或hash)。

您作为路由器用户的工作是确保路由器中有足够的信息供路由器选择正确的处理程序,并且处理程序有足够的信息来完成其工作(例如,要显示的应用程序)

如果网址类似于mysite.com/showApplication,那么显然信息不足。

如果它像:

mysite.com/showApplication/React.createClass(%7Brender%3A%20function()%7Breturn%20React.createElement('div'%2C%20null%2C%20%22I'm%20an%20application!%22%7D%7D)%3B

即。将应用程序放在网址中,提供的信息太多,而且通常是一个非常糟糕的主意。

mysite.com/showApplication/applicationName恰到好处: - )

答案 1 :(得分:-1)

我将提供一种简单易懂的方式,拥有一个全局对象,您可以使用它来跨路线共享信息,例如。

window.CONTEXT = {'share':'this'}

请注意,如果要共享的对象可以通过路由本身重新创建,那么只有这样才能使用这种方式非常重要,因为上面提到的FakeRain路由必须包含足够的信息才能为用户提供如果他们重新加载,也会有同样的经历。

您使用此功能的唯一原因是,如果您需要为要分享的内容请求信息但是您不想要大量链接,则可以节省带宽。