我正在使用useNavigate導航到另一個頁面。導航到另一個頁面時，我需要將介面的實體作為引數傳遞。反正有沒有將介面實體作為引數傳遞？
我想作為引數傳遞的介面：
export interface Api {
apiDescription: string;
apiName: string;
documentId: string;
}
編碼：
const { api, refresh } = props;
const navigate = useNavigate();
return (
<div className="view-button-block">
<Button
size="small"
sx={{ color: "#000000DE", bgcolor: "#D9D9D6" }}
onClick={() => navigate("/managementUi/viewApi", { state: api })}
>
View
</Button>
</div>
);
我想在導航到 route 時將 api 作為引數傳遞"/managementUi/viewApi"。
在 viewApi.tsx 我要導航到的組件：
import React from "react";
import { useLocation } from 'react-router-dom';
import { Api } from '../../../common/Api.types';
const ViewApi = () => {
const location = useLocation();
console.log(location.state);
const api: Api = location.state;
return (
<div>
{location.state.apiName}
</div>
);
};
更新：我將 api 作為狀態傳遞給navigate(). 但是，在我導航到的組件中，當我嘗試從中讀取apiName欄位時，出現location.state“物件的型別為‘未知’”的錯誤。apiName閱讀的正確方法是location.state什么？
如果我嘗試將狀態分配給 api 的宣告，則會出現錯誤“型別未知不可分配給型別 Api”
uj5u.com熱心網友回復：
您將使用介面將其重鑄location.state 為物件Api。
例子：
import { Api } from '../../../common/Api.types';
...
const ViewApi = () => {
const location = useLocation();
const api = location.state as Api;
console.log(api);
return (
<div>
<ViewHeader apiName={api.apiName} />
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521531.html