正确键入路由器-反应路由器v6

Question

我正在尝试升级到react-router-v6，我有很多类组件，我不想转换为功能组件。我从react router中找到了一个函数，它可以让我与类组件一起使用router，但它不是类型化的。有人能帮我吗？

来源：https://reactrouter.com/en/main/start/faq#what-偶发事件-与路由器-我需要-在

这就是我所拥有的：

import { useLocation, useNavigate, useParams } from "react-router-dom";
function withRouter(Component: any) {
function ComponentWithRouterProp(props: any) {
const location = useLocation();
const navigate = useNavigate();
const params = useParams();
return <Component {...props} router={{ location, navigate, params }} />;
}
return ComponentWithRouterProp;
}
export default withRouter;

谢谢。

Answer 1

这应该完成工作，这里是codepen。

import { useLocation, useNavigate, useParams } from "react-router-dom";
type IComponentWithRouterProp = {
[x: string]: any;
};
export function withRouter(Component: Function): Function {
function ComponentWithRouterProp(
props: IComponentWithRouterProp
): JSX.Element {
let location = useLocation();
let navigate = useNavigate();
let params = useParams();
return <Component {...props} router={{ location, navigate, params }} />;
}
return ComponentWithRouterProp;
}