如何在类中从react-router-dom v6中获取参数值
如何在类中从react-router-dom v6中获取参数值
提问于 2020-06-14 04:08:15
我使用的是react-router-dom v6，不知道如何获取参数值
例如：http://localhost:3000/user/:id
我想让:id
有人使用钩子useParams来获取，但我使用的是类，所以我不能使用钩子。
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-07-13 21:40:40
React Router v6中已弃用库提供的HOC withRouter。如果您需要使用v6并使用基于类的React组件，那么您将需要编写自己的HOC，它使用*钩子包装v6。
例如：
export function withRouter( Child ) {
return ( props ) => {
const location = useLocation();
const navigate = useNavigate();
return <Child { ...props } navigate={ navigate } location={ location } />;
}
}如果您有大量需要迁移到v6的代码库，但还没有将所有基于类的组件迁移到函数式组件中，这将非常有用。
这是基于本期Github中声明的开发团队的建议：https://github.com/ReactTraining/react-router/issues/7256 t
Stack Overflow用户
发布于 2021-01-19 23:11:35
Typescript HoC
import React from "react";
import { NavigateFunction, useLocation, useNavigate, useParams } from "react-router";
export interface RoutedProps<Params = any, State = any> {
location: State;
navigate: NavigateFunction;
params: Params;
}
export function withRouter<P extends RoutedProps>( Child: React.ComponentClass<P> ) {
return ( props: Omit<P, keyof RoutedProps> ) => {
const location = useLocation();
const navigate = useNavigate();
const params = useParams();
return <Child { ...props as P } navigate={ navigate } location={ location } params={ params }/>;
}
}然后让类组件props使用可选的参数和状态类型扩展RoutedProps
Stack Overflow用户
发布于 2020-06-14 04:14:58
import { withRouter } from 'react-router-dom'
export withRouter(YourComponent)
然后访问组件中的this.props.match.params
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62365009
复制相关文章
相似问题
腾讯云开发者
