以这个带有路由参数的示例路由为例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;
现在从渲染的组件:
我的组件.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
)都存在,你可以从下面的图片中看到。
在评论和这些其他内容的帮助下:
这是我的做法:
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()
钩子:
interface RouteParams {
slug: string
}
const params = useParams<RouteParams>();
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句