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

型
但是“history”组件始终是“undefined”的。有没有一种更“离子化”的方式来做到这一点，而不涉及history对象？