在ReactJS中，尝试获取参数，但获取属性'；id'；不存在于类型'；{}'；

这是路线。我正在尝试获取param like/fetchdata/someid，并且我尝试了

this.props.match.params.id

这就是它所说的：

类型“{}”上不存在属性“id”

import*as React from'React'；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“./components/Layout”导入{Layout}；
从“./components/containers/Home”导入{Home}；
从“./components/FetchData”导入FetchData；
从“./components/Counter”导入{Counter}；
导出常量路径=
;

FetchData组件看起来参数id在匹配项中，但我无法获取它。：/我想我错过了比赛？但我不知道怎么做：/。有人能帮我吗？我使用react路由器：“4.0.12”

import*as React from'React'；
从“react router”导入{RouteComponentProps，matchPath}；
导入“同构提取”；
//从“/FetchDataLoaded”导入FetchDataLoaded；
从“react router dom”导入{withRouter}；
从“查询字符串”导入查询字符串；
接口FetchDataExampleState{
预测：天气预报[]；
加载：布尔；
懒散成分；
身份证件
}
//const queryString=require（'query-string'）；
类FetchData扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={preferences:[]，load:true，lazyloadedComponent:get，id:“}；
获取（'api/SampleData/WeatherForecasts'）
.then（response=>response.json（）作为承诺）
。然后（数据=>{
this.setState（{预测：数据，加载：false}）；
});
}
异步组件didmount（）{
试一试{
//设params=this.props.match.params
//const idquery=queryString.parse（this.props.location.）.id；
//const idquery=queryString.parse（this.props.match.params）.id；
//const idquery=this.props.match.params.id；
const idParam=this.props.match.params.id
这是我的国家({
id:idParam
})
const lazyLoadedComponentModule=等待导入（'./FetchDataLoaded'）；
this.setState（{lazyloadedComponent:React.createElement（lazyLoadedComponentModule.default）}）
}
捕捉（错误）{
这是我的国家({
lazyloadedComponent:${err}
})
}    
}    
公共渲染（）{
让内容=this.state.loading
加载

：FetchData.renderForecastsTable（this.state.forecastStable）；
返回
Id:{this.state.Id}
{this.state.lazyloadedComponent}
天气预报
此组件演示如何从服务器获取数据

{contents}
;
}
私有静态renderForecastsTable（预测：WeatherForecast[]）{
返回
日期
温度（C）
温度（F）
总结
{forecast.map（forecast=>
{forecast.dateFormatted}
{forecast.temperatureC}
{forecast.temperatureF}
{forecast.summary}
)}
;
}
}
使用路由器导出默认值（FetchData）
界面天气预报{
日期格式：字符串；
温度c：数字；
温度f：数字；
摘要：字符串；
}

您可以在

RouteComponentProps

的类型参数中指定匹配的路由参数的类型，因此，如果更换

class FetchData extends React.Component<RouteComponentProps<{}>, FetchDataExampleState> {

类FetchData扩展React.Component{

与

接口路由图{id:string，param2？:string}
类FetchData扩展React.Component{

使用React功能组件，这将起作用：

从“React”导入React；
从“react router dom”导入{match}；
导出接口AuditCompareOuteParams{
文件类型：字符串；
}
导出常量比较=（{match}:{match:match}）=>{
log（match.params.fileType）；
};

对于挂钩：

export interface IUserPublicProfileRouteParams {
    userId: string;
    userName: string;
}

const {userId, userName} = useParams<IUserPublicProfileRouteParams>();

导出接口IUserPublicProfileRouteParams{
userId:string；
用户名：字符串；
}
const{userId，userName}=useParams（）；

请参见此处，或者如果您不希望导出接口，

让{id}=useParams（）；

class FetchData extends React.Component<RouteComponentProps<{}>, FetchDataExampleState> {

interface RouteParams {id: string, param2?: string}
class FetchData extends React.Component<RouteComponentProps<RouteParams>, FetchDataExampleState> {

export interface IUserPublicProfileRouteParams {
    userId: string;
    userName: string;
}

const {userId, userName} = useParams<IUserPublicProfileRouteParams>();