Как вызвать перенаправление с обратным направлением в Ioni c React 5?

Question

Как вызвать перенаправление в указанное местоположение с заданным направлением анимации (скажем, назад) в Ioni c router , не щелкая элемент ссылки на маршрутизатор?

Существует стандартный метод для запуска перенаправления маршрутизатора. Проблема в том, что он не может изменить направление анимации, поэтому он всегда вперед:

// history is a value from react-router, it can be obtained from the HOC of the hook
history.push('/new/address');

Существует также метод возврата go, но он не может установить пользовательский URL-адрес на go :

history.goBack();

Я также могу сделать кнопку и нажать на нее, но это выглядит громоздким решением:

const buttonRef = useRef();

const redirect = () => buttonRef.current.click();

return (
  <IonButton
    routerLink="/new/address"
    routerDirection="back"
    ref={buttonRef}
    style={{display: 'none'}}
  />
);

Answer 1

Существует недокументированный метод для запуска перенаправления маршрутизатора Ioni c на любой адрес с любой анимацией: 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');
  }
}

Возможные значения второго аргумента такие же, как в компонентах связи Ioni c: back, forward и root .