如何解决如何使用Typescript从react-router-dom访问路由参数?例如:`/ some-route /:slug`
以该示例路线为例,该路线采用参数slug
:
ROUTES.ts
export const SOME_ROUTE = `/some-route/:slug`;
这个<Switch>
组件将呈现<Route>
。
AllRoutes.tsx
import React from "react";
import * as ROUTES from "@routes/ROUTES";
interface AllRoutes {
}
const AllRoutes: React.FC<AllRoutes> = (props) => {
console.log("Rendering AllRoutes...");
return(
<Switch>
<Route exact path={ROUTES.SOME_ROUTE} component={MyComponent}/>
</Switch>
);
};
export default AllRoutes;
现在从渲染的组件开始:
MyComponent.tsx
import React from "react";
import HomePage from "./HomePage";
import { RouteComponentProps } from "react-router-dom";
interface MyComponent extends RouteComponentProps {
}
const MyComponent: React.FC<MyComponent> = (props) => {
console.log("Rendering MyComponent...");
console.log(props.match.params.slug); // TRYING TO ACCESS THE `:slug` ROUTE PARAM
return(
<HomePage/>
);
};
export default MyComponent;
问题
我收到一条错误消息,指出slug
属性不存在。即使100%存在,也会因为记录了该值。但是Typescript不知道它。
我需要手动扩展RouteComponentProps
来添加该props.match.params.slug
属性吗?
存在routeProps
(history
,match
,location
),如下图所示。
解决方法
借助评论和其他内容:
- In ReactJS trying to get params but I get property 'id' does not exist on type '{}'
- 这篇文章:Using typescript to write react-router 5
这是我的做法:
import React from "react";
import HomePage from "./HomePage";
import { RouteComponentProps } from "react-router-dom";
interface RouteParams {
slug: string
}
interface MyComponent extends RouteComponentProps<RouteParams> {
}
const MyComponent: React.FC<MyComponent> = (props) => {
console.log("Rendering MyComponent...");
console.log(props.match.params.slug);
return(
<HomePage/>
);
};
export default MyComponent;
useParams()
并使用useParams()
钩子:
interface RouteParams {
slug: string
}
const params = useParams<RouteParams>();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。