0

我正在使用 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;

现在，由于我正在为移动设备构建它，因此我正在使用电容器。这使我能够监听硬件后退按钮事件。当用户按下他们的后退按钮时，我希望他们在这个例子中回到“主页”。我发现的所有答案总是指导航按钮，可以在其中声明自定义状态并可能使用<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是当用户从菜单中选择一个项目时改变的状态，所以通常应用程序不需要重新加载。

我该怎么办？

4

1 回答 1

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

const history = useHistory();

Plugins.App.addListener("backButton", () => {
  history.push("/page/Home");
});
于 2020-11-20T15:55:42.223 回答