如何使用 Typescript 从 react-router-dom 访问路由参数?例如:`/some-route/:slug`
Posted
技术标签:
【中文标题】如何使用 Typescript 从 react-router-dom 访问路由参数?例如:`/some-route/:slug`【英文标题】:How to access route params from react-router-dom using Typescript? Ex: `/some-route/:slug` 【发布时间】:2020-12-17 12:26:33 【问题描述】:以这个带有路由参数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
)。
【问题讨论】:
为什么不提供预期的参数?大概就像RouteComponentProps< slug: string >
。 ***.com/q/50047977/3001761的欺骗。
感谢您的回复。像这样的东西:interface MyComponent extends RouteComponentProps<slug: string>
?我这样做不会覆盖其他东西吗?
覆盖什么其他东西? MyComponent
没有定义其他任何东西,看起来毫无意义;只需使用React.FC<RouteComponentProps< slug: string >>
。
@jonrsharpe 我的意思是RouteComponentProps
中定义的其他内容,来自@types/react-router-dom
。
还有什么?如果 not 指定参数,您认为泛型是什么?看定义:github.com/DefinitelyTyped/DefinitelyTyped/blob/….
【参考方案1】:
借助 cmets 和这些其他内容:
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>();
【讨论】:
看起来该链接与您使用 useParams() 的方式不同。对不起,钩子新手。你把它放在哪里? @BBaysinger 您可以从react-router-dom
导入useParams
。 Link
我得到了导入。声明放在哪里?
@BBaysinger 在d.ts
文件或任何您认为合适的.ts
文件中。导出它,然后在需要使用它的任何地方导入它。像答案中的示例一样使用它:const params = useParams<RouteParams>();
以上是关于如何使用 Typescript 从 react-router-dom 访问路由参数?例如:`/some-route/:slug`的主要内容,如果未能解决你的问题,请参考以下文章
如何将 Relay 查询从 TypeScript 转换为 ES5?
Typescript:如何从 react-bootstrap 导入特定组件