使用 match 将路由器 dom 与 Typescript 反应答案

【问题标题】：React router dom with Typescript using match使用 match 将路由器 dom 与 Typescript 反应
【发布时间】：2021-12-02 18:03:00
【问题描述】：

我正在使用带有 React v 17 和 TypeScript 的 React Router Dom 版本 5。我试图弄清楚如何使用 match 对象。到目前为止，我有：

import { BrowserRouter, Route, Switch, match } from 'react-router-dom';


interface DetailsProps {
  match?: match<string> ;
}

const Routing: React.FunctionComponent<DetailsProps> = (props: DetailsProps) => {
   const match = props.match;

   // more routes here
   <Route path={`${match.url}`} render={() => <Component/>} />
}

我得到错误：对象可能是“未定义”。

任何想法的原因是什么？类型错了吗？

【问题讨论】：

标签： javascript reactjs typescript react-router

【解决方案1】：

你可以导入它：

import { match } from 'react-router-dom';

【讨论】：

我已经补充了，我已经更新了问题

【解决方案2】：

您的界面显示match 是optional param，可以是undefined

interface DetailsProps {
  match?: match<string> ;
}

通过删除? 标记，您将使其成为必需：

interface DetailsProps {
  match: match<string> ;
}

【讨论】：

“{}”类型中缺少属性“匹配”，但在“DetailsProps”类型中是必需的。
@Sole，您从'react-router-dom' 导入了它，并且您还试图通过道具到达它。您应该从您想要获取match 的位置选择一种方式，不是吗？因此，您可以删除道具并仅使用直接导入。但我不是 100% 确定你想在那里实现什么。
匹配对象来自 react-router-dom 所以你需要它
@Sole，所以你可以尝试完全移除 props 和 interface 并从 import 中使用。