React-router:通过路由传递数据
React-router: Passing data through routes
我正在尝试找出通过我的路线传递数据的最佳方式。我知道我可以使用参数,但有些类型的数据不属于参数。
例如:我有一个显示应用程序列表的索引页。每个应用程序旁边都有一个按钮,可以将您转到该应用程序的视图。
我想将应用程序本身传递给应用程序处理程序。但是,通过params传递整个应用程序是没有意义的。虽然将应用程序标识符传递给参数确实有意义(即:id 或:name)
所以我认为我应该这样做的方式是将应用程序标识符传递给参数,然后在应用程序组件中搜索我的 ApplicationStore 以找到给定标识符的适当应用程序。
但是,通过应用程序本身不是更容易和更快吗?有没有办法做到这一点。有什么理由不这样做吗?
这是一些代码:
<Link to="showApplication" params={{name: application.name}}>View</Link>
或
<Link to="showApplication" params={{application: application}}>View</Link>
提前致谢!
问题在于,当用户刷新或以其他方式直接加载 url 时,它需要显示正确的视图。因为 URLs 只是字符串,所以您需要将路由表示为字符串。您不能(轻松地)将实际应用程序推入 url.
路由器的工作是获取该字符串(URL)并将其映射到实际代码(处理程序),并提供任何额外数据(参数、查询、and/or哈希)。
作为路由器用户,您的工作是确保 URL 中有足够的信息让路由器选择正确的处理程序,并让处理程序有足够的信息来完成它的工作(例如,哪个应用程序要显示).
如果 url 类似于 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
即将应用程序放入 url,信息太多,通常是一个非常糟糕的主意。
但是 mysite.com/showApplication/applicationName
恰到好处:-)
我将提供一种简单而 hacky 的方法,有一个全局对象,您可以使用它来跨路由共享信息,例如。
window.CONTEXT = {'share':'this'}
请注意,仅当您要共享的对象可以通过路由本身重新创建时,才使用这种方式非常重要,因为上面提到的 FakeRain 路由必须包含足够的信息才能为用户提供相同的信息如果他们重新加载经验。
您使用它的唯一原因是如果您需要为您想要共享的内容请求信息但又不想要巨大的 link。
我正在尝试找出通过我的路线传递数据的最佳方式。我知道我可以使用参数,但有些类型的数据不属于参数。
例如:我有一个显示应用程序列表的索引页。每个应用程序旁边都有一个按钮,可以将您转到该应用程序的视图。
我想将应用程序本身传递给应用程序处理程序。但是,通过params传递整个应用程序是没有意义的。虽然将应用程序标识符传递给参数确实有意义(即:id 或:name)
所以我认为我应该这样做的方式是将应用程序标识符传递给参数,然后在应用程序组件中搜索我的 ApplicationStore 以找到给定标识符的适当应用程序。
但是,通过应用程序本身不是更容易和更快吗?有没有办法做到这一点。有什么理由不这样做吗?
这是一些代码:
<Link to="showApplication" params={{name: application.name}}>View</Link>
或
<Link to="showApplication" params={{application: application}}>View</Link>
提前致谢!
问题在于,当用户刷新或以其他方式直接加载 url 时,它需要显示正确的视图。因为 URLs 只是字符串,所以您需要将路由表示为字符串。您不能(轻松地)将实际应用程序推入 url.
路由器的工作是获取该字符串(URL)并将其映射到实际代码(处理程序),并提供任何额外数据(参数、查询、and/or哈希)。
作为路由器用户,您的工作是确保 URL 中有足够的信息让路由器选择正确的处理程序,并让处理程序有足够的信息来完成它的工作(例如,哪个应用程序要显示).
如果 url 类似于 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
即将应用程序放入 url,信息太多,通常是一个非常糟糕的主意。
但是 mysite.com/showApplication/applicationName
恰到好处:-)
我将提供一种简单而 hacky 的方法,有一个全局对象,您可以使用它来跨路由共享信息,例如。
window.CONTEXT = {'share':'this'}
请注意,仅当您要共享的对象可以通过路由本身重新创建时,才使用这种方式非常重要,因为上面提到的 FakeRain 路由必须包含足够的信息才能为用户提供相同的信息如果他们重新加载经验。
您使用它的唯一原因是如果您需要为您想要共享的内容请求信息但又不想要巨大的 link。