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

IT技术 reactjs reactjs-flux react-router
2021-04-27 12:41:10

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

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

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

所以我认为我应该这样做的方式是将应用程序标识符传递给 params,然后在应用程序组件中搜索我的 ApplicationStore 以找到给定标识符的适当应用程序。

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

这是一些代码:

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

或者

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

提前致谢!

2个回答

问题是,当人刷新,或以其他方式直接加载 url 时,它需要显示正确的视图。由于 URL 只是字符串,因此您需要将路由表示为字符串。您不能(轻松)将实际应用程序推送到 url 中。

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

作为路由器用户,您的工作是确保 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,路由必须包含足够的信息,以便在用户重新加载时为用户提供相同的体验。

如果您需要请求有关要共享的内容的信息但又不想要大链接,则使用它的唯一原因是节省带宽。