如何在没有URL参数的情况下在页面之间传递数据

Question

我想知道如何使用ReactRouter在Ionic 5中的两个页面之间传递非字符串数据。

我能找到的所有解决方案都使用Ionic和Angular，或者只传递一个字符串作为URL参数。

到目前为止，这些是我的组件：

App.tsx

const App: React.FC = () => {
return (
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/page/Home" component={Home} exact />
<Route path="/page/DataEntry" component={DataEntry} exact />
<Route path="/page/Request" component={Request} exact />
<Route path="/page/ResultMap" component={ResultMap} exact />
<Redirect from="/" to="/page/Home" exact />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
</IonApp>
);
};

这里的第1页收集用户输入数据(字符串、对象、数组(，我想在点击按钮并传递数据时调用路由"/Page/ResultMap"，这样下一页就可以处理它：

<IonGrid>
<IonRow>
<IonCol class="ion-text-center">
<IonButton text-center="ion-text-center" color="primary" size="default" routerLink='/page/ResultMap'>Erkunden!</IonButton> 
</IonCol>
</IonRow>
</IonGrid>

第2页，应接收数据：

const ResultMap: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Map</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
</IonContent>
</IonPage>
);
};

我理解React关于道具和状态的原理，只是不知道在这种情况下如何将其与Ionic相结合。

我感谢你的帮助！

编辑：

按照建议，我更改了按钮点击如下：

<IonButton text-center="ion-text-center" color="primary" size="default" onClick={e => {
e.preventDefault();
history.push({
pathname: '/page/ResultMap',
state: { time: transportTime }
})}}>

并尝试在ResultMap页面上接收数据，如下所示：

let time = history.location.state.time;

但我得到了错误：

Object is of type 'unknown'.  TS2571
7 |   let history = useHistory();
8 | 
>  9 |   let time = history.location.state.time;
|              ^

如何访问新页面上传递的对象？

Answer 1

至于react路由器，我知道你可以使用这个：

history.push({
pathname: '/template',
state: { detail: response.data }
})

在这种情况下，可以在没有URL参数的情况下传递数据也可以使用历史记录.replace如果您重定向并希望返回按钮正常工作到最终用户

对于历史，请执行以下

let history = useHistory();

查看此链接以了解如何实现useHistory类型