如何在类中从react-router-dom v6获取参数值

Question

我正在使用react-router-dom v6，不知道如何获取参数值

前任：http://localhost:3000/user/:id

我想要得到:id

有人使用钩子useParams来获取，但我正在使用类，所以我不能使用钩子。

Answer 1

库提供的 HOC withRouter 在 React Router v6 中已被弃用。如果您需要使用 v6 并且正在使用基于类的 React 组件，那么您将需要编写自己的 HOC 来包装 v6 use* 挂钩。

例如：

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

Answer 2

Typescript 高阶组件

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 使用可选的 Params 和 State 类型扩展 RoutedProps