文章/答案/技术大牛

发布

社区首页 >问答首页 >如何通过反应性路由器-dom导航传递对象参数

问如何通过反应性路由器-dom导航传递对象参数
EN

Stack Overflow用户

提问于 2022-10-27 16:21:06

回答 1查看 48关注 0票数 1

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

我希望在导航到路由"/managementUi/viewApi"时将api作为参数传递。

在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>
  );
};

更新:我在navigate()中将api作为状态传递。但是，在我导航到的组件中，当我尝试从它读取apiName字段时，location.state的错误是"Object的类型‘未知’“。从apiName读取location.state的正确方法是什么？

如果我试图将状态赋值给api的声明，它将出现错误“类型未知不可分配给类型Api”。

react-router

react-router-dom

reactjs

typescript

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-10-27 16:59:24

您将把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>
  );
};

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74225271

复制

相似问题

问如何通过反应性路由器-dom导航传递对象参数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过反应性路由器-dom导航传递对象参数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过反应性路由器-dom导航传递对象参数
EN