我使用react-router-dom v 4.3.1进行客户端路由。我对React很陌生,无法弄清楚如何在不使用url参数的情况下将数据从一个视图传递到另一个视图。在Angular中,Angular路由器具有data属性,您可以在其中传递与路线关联的数据。一个例子是:
const appRoutes: Routes = [
{
path: 'hero/:id',
component: HeroDetailComponent,
data: { title: 'Hero Detail' }
},
];
您可以在react-router-dom中做同样的事情吗?如果没有,您如何建议我在React中传递数据?
预先感谢您的帮助!
答案 0 :(得分:2)
<Route path="hero/:id" render={() => <HeroDetailComponent title= "Hero Detail" />} />
阅读:Pass props to a component rendered by React Router
或者,如果您使用的是<Link>
,则可以使用直通位置对象
<Link to={{ pathname: 'hero/:id', state: { title: 'Hero Detail'} }}>My route</Link>
答案 1 :(得分:0)
好吧,您可以使用上下文API创建一种全局AppState,您可以在第一个组件中进行更新,然后在第二个组件中使用。
您还可以通过在第一个组件中设置数据密钥并在另一个组件中获取密钥来滥用localStorage API。
但是,这两个都是不应该使用的解决方法。为什么要重定向到页面但不使用URL参数将数据传递给页面。
答案 2 :(得分:0)
有几种解决方案。作为一个库而不是一个框架,React不会迫使您成为一个单一的库。
一种方法是使用上下文api。就像指向不同组件之间共享的对象的链接。
另一个是redux,它使用下面的上下文,并为您提供整个应用程序的单个存储。您可以更改对商店的价值分配操作,因此第一次学习会有些棘手。
使用流库会打开很多不同的选项,但是很难理解。如果要这样做,请检查折射。
一个穷人的流方法可能会为您服务,这是使用文档作为总线传递数据,使用addEventListeners接收数据并调度新的customEvent发送它。
下一步是最简单的方法,共享一个简单的对象。使用从组件导入的数据,您可以在两个对象上导入相同的对象,这将是可以共享数据的单个实例。简单的JavaScript。但是,这不是反应方式,因为更改不会触发组件上的重新绘制。