使用 Ionic 7 和 React 18，如何访问历史对象以在页面之间导航？

Question

我正在使用 Ionic 7 和 React 18。我想构建一个下拉组件，这样当选择一个选项时，我的 URL 将更改为包含所选选项的 ID。我在我的 App.tsx 文件中设置了这个，

<IonHeader>
  <IonToolbar>
    <IonButtons slot="start">
      <IonButton>
        <IonIcon icon={logoReact} />
      </IonButton>
    </IonButtons>
    <IonTitle>My Title</IonTitle>
    <IonButtons slot="end">
      <IonButton>
        <IonIcon icon={search} />
      </IonButton>
      <IonButton>
        <IonIcon icon={personCircle} />
      </IonButton>
    </IonButtons>
  </IonToolbar>
  <IonToolbar>
    <CategorySelectComponent />
  </IonToolbar>
</IonHeader>
...
   <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/home">
          <Home />
        </Route>
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
        <Route exact path="/cards/:categoryId">
          <CardSlideComponent />
        </Route>
      </IonRouterOutlet>

我的选择组件就是这样

import {
  IonContent,
  IonItem,
  IonLabel,
  IonPage,
  IonSelect,
  IonSelectOption,
} from "@ionic/react";
import React, { useEffect } from "react";
import { useState } from "react";
import axios from "axios";
import CardService from "../services/CardService";
import { useHistory } from "react-router-dom";

const CategorySelectComponent: React.FC = () => {
  const [selectedValue, setSelectedValue] = useState<string | undefined>(
    undefined
  );
  const [options, setOptions] = useState<Category[]>([]);

  const history = useHistory();
  console.log(history); // this is always undefined

  const handleSelectionChange = (event: CustomEvent) => {
    const selectedCategoryId = event.detail.value;
    setSelectedValue(selectedCategoryId);

    // Navigate to the selected category page
    console.log("handle change ...");
    console.log(history);
    history.push(`/cards/${selectedCategoryId}`);
  };

  useEffect(() => {
    CardService.getCategories(setOptions);
  }, []); // Empty dependency array means this effect runs once on component mount

  return (
    <IonPage>
      <IonContent>
        <IonItem>
          <IonLabel>Choose an option:</IonLabel>
          <IonSelect
            value={selectedValue}
            onIonChange={handleSelectionChange}
            interface="popover"
          >
            {options.map((category) => (
              <IonSelectOption key={category.id} value={category.id}>
                {category.name}
              </IonSelectOption>
            ))}
          </IonSelect>
        </IonItem>

        <IonItem>
          <IonLabel>Selected Value:</IonLabel>
          <IonLabel>{selectedValue}</IonLabel>
        </IonItem>
      </IonContent>
    </IonPage>
  );

但是“历史”组件始终是“未定义”的。有没有一种更“离子”的方式来做到这一点，不涉及历史对象？

Answer 1

我最近遇到了同样的问题，当需要使用

useIonRouter

钩子来检查是否可以返回导航时。您只需将 ReactTree 中的路由器组件（提供路由上下文，例如

history

对象）提升到比任何使用它的组件更高的位置即可。

将

IonHeader

组件塞入

IonReactRouter

组件内。

<IonReactRouter>
  ...

  <IonHeader>
    <IonToolbar>
      <IonButtons slot="start">
        <IonButton>
          <IonIcon icon={logoReact} />
        </IonButton>
      </IonButtons>
      <IonTitle>My Title</IonTitle>
      <IonButtons slot="end">
        <IonButton>
          <IonIcon icon={search} />
        </IonButton>
        <IonButton>
          <IonIcon icon={personCircle} />
        </IonButton>
      </IonButtons>
    </IonToolbar>
    <IonToolbar>
      <CategorySelectComponent />
    </IonToolbar>
  </IonHeader>
  ...
   
  <IonRouterOutlet>
    <Route exact path="/home">
      <Home />
    </Route>
    <Route exact path="/">
      <Redirect to="/home" />
    </Route>
    <Route exact path="/cards/:categoryId">
      <CardSlideComponent />
    </Route>
  </IonRouterOutlet>
</IonReactRouter>