如何在没有URL参数的情况下在页面之间传递数据
How to pass data between pages without URL Parameters
我想知道如何使用 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关于props和state的原理,只是不知道在这种情况下如何将它与Ionic结合起来。
感谢您的帮助!
编辑:
按照建议,我像这样更改了 onClick 按钮:
<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;
| ^
如何在新页面访问传递的对象?
至于 react-router 我知道你可以使用这个:
history.push({
pathname: '/template',
state: { detail: response.data }
})
在这种情况下,您可以在没有 URL 参数的情况下传递数据
也可以使用 history.replace
如果您重定向并希望后退按钮对最终用户正常工作
对于历史记录,请执行以下操作
let history = useHistory();
我想知道如何使用 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关于props和state的原理,只是不知道在这种情况下如何将它与Ionic结合起来。
感谢您的帮助!
编辑:
按照建议,我像这样更改了 onClick 按钮:
<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;
| ^
如何在新页面访问传递的对象?
至于 react-router 我知道你可以使用这个:
history.push({
pathname: '/template',
state: { detail: response.data }
})
在这种情况下,您可以在没有 URL 参数的情况下传递数据 也可以使用 history.replace 如果您重定向并希望后退按钮对最终用户正常工作
对于历史记录,请执行以下操作
let history = useHistory();