Блог

Я использую шаблон бокового меню из Ionic React, поэтому большая часть моей логики находится в ExploreContainer.tsx .

 //imports

//some logic

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
  switch( name ) {  //switch to show content on requested item from side menu
    case 'Home':
      return (
        //content for home
      );
    case 'Info':
      return (
        //content for info
      );
  }
};

export default ExploreContainer;
 

Теперь, поскольку я создаю это для мобильных устройств, я использую конденсатор. Это позволяет мне прослушивать аппаратные события кнопки возврата. Когда пользователь нажимает кнопку «Назад», я хочу, чтобы в этом примере он возвращался обратно в «Home».
Все ответы, которые я нашел, как бы всегда относятся к кнопкам для навигации, где можно объявить пользовательское состояние и, возможно, использовать <Redirect /> компонент.

Теперь, чтобы расширить предыдущий пример, допустим, я хочу что-то вроде этого:

 //imports
import { Plugins } from '@capacitor/core';
    
const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {

  Plugins.App.addListener("backButton", () => {
    name = "Home";
  }

  switch( name ) {  //switch to show content on requested item from side menu
    case 'Home':
      return (
        //content for home
      );
    case 'Info':
      return (
        //content for info
      );
  }
};

export default ExploreContainer;
 

К сожалению, это не работает. Ранее я пробовал следующее:

 import { useHistory } from 'react-router-dom';

Plugins.App.addListener("backButton", () => {
  history.push("/page/Home");
});
 

Однако это приводит к действительно уродливому поведению. Приложение полностью перезагружается, все переменные сбрасываются и т.д.

Если я правильно понимаю, name свойство — это ExploreContainer состояние, которое изменяется, когда пользователь выбирает элемент из меню, поэтому обычно приложению не нужно перезагружаться.

Как бы я поступил по этому поводу?

 import { useHistory } from 'react-router-dom';

const history = useHistory();

Plugins.App.addListener("backButton", () => {
  history.push("/page/Home");
});