如何在不使用url参数的情况下通过react router dom将数据从一个视图传递到另一个视图?

<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>

您可以使用contextapi创建一种全局AppState,您可以在第一个组件中更新它,并在第二个组件中使用它。

您还可以通过在第一个组件中设置一个键并在另一个组件中获取数据来滥用localStorage API。

但是,这两种方法都是不应该使用的变通方法。为什么要重定向到某个页面,而不使用URL参数将数据传递给该页面。

一种方法是使用上下文api。它就像链接到不同组件之间共享的对象。

另一个是redux,它在下面使用上下文,为整个应用程序提供一个单独的商店。您将更改值并将操作发送到存储,因此第一次学习有点棘手。

使用流库会打开许多不同的选项,但很难进入。如果你想走这条路,请选中折射。

一个可能为您服务的糟糕的mans流方法是使用document作为总线来传递数据,使用addEventListeners接收数据并发送新的customEvent。

接下来是最简单的一个,共享一个简单的对象。使用组件的导入,您可以在两个组件上导入相同的对象,这将是共享数据的单个实例。简单的JavaScript。但这不是react方式,因为更改不会触发组件的重新绘制。