javascript - 如何在 Ionic React 5 中触发反向重定向？

Question

如何在 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'}}
  />
);

Answer 1

有一种未记录的方法可以触发 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 链接组件中的相同: back , forward和 root .