我正在使用Ionic 7和Reaction 18.我想构建一个下拉组件,以便在 Select 一个选项时,我的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>
我的 Select 组件是这样的
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>
);
但"历史"部分始终是"未定义的". 有没有一种更"ionic "的方式来做这件事,而不涉及历史对象?