如何在 Ionic React 5 中触发反向重定向?
How to trigger redirect with back direction in Ionic React 5?
如何在不单击路由器 link 元素的情况下触发重定向到 Ionic router 中具有给定动画方向(例如,返回)的给定位置?
有一种标准方法可以触发路由器重定向。问题是它不能改变动画方向所以它总是向前的:
// history is a value from react-router, it can be obtained from the HOC of the hook
history.push('/new/address');
也有返回的方法,但是不能设置自定义URL去:
history.goBack();
我也可以制作一个按钮并触发点击它,但它看起来像一个笨拙的解决方案:
const buttonRef = useRef();
const redirect = () => buttonRef.current.click();
return (
<IonButton
routerLink="/new/address"
routerDirection="back"
ref={buttonRef}
style={{display: 'none'}}
/>
);
有一种未记录的方法可以触发 Ionic 路由器重定向到具有任何动画的任何地址:NavContext
。它只能在 React 组件内部使用。
import React, {Component, useCallback, useContext} from 'react';
import {NavContext} from '@ionic/react';
// Functional component example
function MyComponent() {
const {navigate} = useContext(NavContext);
// Call this function when required to redirect with the back animation
const redirect = useCallback(
() => navigate('/new/address', 'back'),
[navigate]
);
}
// Class component example
class MyComponent extends Component {
static contextType = NavContext;
// Call this method when required to redirect with the back animation
redirect() {
this.context.navigate('/new/address', 'back');
}
}
第二个参数的可能值与 Ionic link 组件中的相同:back
、forward
和 root
。
正如@Finesse 指出的那样,Ionic 的 React 库提供了 NavContext
导航上下文,它在双关语的导航上下文中公开了一些有用的方法。
其中有 goBack()
方法,它可以简单地向后导航。它需要一个默认路由来导航。我猜这是针对在返回堆栈上没有先前项目的情况。可以按如下方式使用:
import {useContext} from 'react'
import {NavContext} from '@ionic/react'
...
const {goBack} = useContext(NavContext)
goBack('/alternative/path/if/empty/history')
...
除了 navigate()
和 goBack()
上下文还提供以下字段:
export interface NavContextState {
getPageManager: () => any;
getStackManager: () => any;
goBack: (defaultHref?: string) => void;
navigate: (path: string, direction?: RouterDirection | 'none', ionRouteAction?: 'push' | 'replace' | 'pop') => void;
hasIonicRouter: () => boolean;
registerIonPage: (page: HTMLElement) => void;
currentPath: string | undefined;
}
如何在不单击路由器 link 元素的情况下触发重定向到 Ionic router 中具有给定动画方向(例如,返回)的给定位置?
有一种标准方法可以触发路由器重定向。问题是它不能改变动画方向所以它总是向前的:
// history is a value from react-router, it can be obtained from the HOC of the hook
history.push('/new/address');
也有返回的方法,但是不能设置自定义URL去:
history.goBack();
我也可以制作一个按钮并触发点击它,但它看起来像一个笨拙的解决方案:
const buttonRef = useRef();
const redirect = () => buttonRef.current.click();
return (
<IonButton
routerLink="/new/address"
routerDirection="back"
ref={buttonRef}
style={{display: 'none'}}
/>
);
有一种未记录的方法可以触发 Ionic 路由器重定向到具有任何动画的任何地址:NavContext
。它只能在 React 组件内部使用。
import React, {Component, useCallback, useContext} from 'react';
import {NavContext} from '@ionic/react';
// Functional component example
function MyComponent() {
const {navigate} = useContext(NavContext);
// Call this function when required to redirect with the back animation
const redirect = useCallback(
() => navigate('/new/address', 'back'),
[navigate]
);
}
// Class component example
class MyComponent extends Component {
static contextType = NavContext;
// Call this method when required to redirect with the back animation
redirect() {
this.context.navigate('/new/address', 'back');
}
}
第二个参数的可能值与 Ionic link 组件中的相同:back
、forward
和 root
。
正如@Finesse 指出的那样,Ionic 的 React 库提供了 NavContext
导航上下文,它在双关语的导航上下文中公开了一些有用的方法。
其中有 goBack()
方法,它可以简单地向后导航。它需要一个默认路由来导航。我猜这是针对在返回堆栈上没有先前项目的情况。可以按如下方式使用:
import {useContext} from 'react'
import {NavContext} from '@ionic/react'
...
const {goBack} = useContext(NavContext)
goBack('/alternative/path/if/empty/history')
...
除了 navigate()
和 goBack()
上下文还提供以下字段:
export interface NavContextState {
getPageManager: () => any;
getStackManager: () => any;
goBack: (defaultHref?: string) => void;
navigate: (path: string, direction?: RouterDirection | 'none', ionRouteAction?: 'push' | 'replace' | 'pop') => void;
hasIonicRouter: () => boolean;
registerIonPage: (page: HTMLElement) => void;
currentPath: string | undefined;
}