react+typescript 取路由参数 props怎么定义

Question

本人是菜鸟勿喷

先看主要代码，想取URL的地址中的参数：

export interface JobListPageProps extends RouteComponentProps{
  jobList: JobModel;
  dispatch: Dispatch;
}

class JobListPage extends Component<JobListPageProps>{
    componentDidMount() {
        const {current= 1, pageSize= 10 } = this.props.history.location.query; 
    };
}

在idea编辑器中typescript在this.props.history.location.query这个位置报出的问题

TS2339: Property 'query' does not exist on type 'Location<any>'.

请问应该怎么定义JobListPageProps？

感谢

Answer 1

export interface JobListPageProps extends RouteComponentProps{
  jobList: JobModel;
  dispatch: Dispatch;
  history: any;
}

Answer 2

用法一：基本使用

引入RouteComponentProps类型

import { RouteComponentProps} from 'react-router-dom';
export interface PageProps extends RouteComponentProps {
}

RouteComponentProps 中的定义

export interface RouteComponentProps<Params extends { [K in keyof Params]?: string } = {}, C extends StaticContext = StaticContext, S = H.LocationState> {
  history: H.History;
  location: H.Location<S>;
  match: match<Params>;
  staticContext?: C;
}

但是H.Location<S>中的定义不包含query. 详情请见：

export interface Location<S = LocationState> {
    pathname: Pathname;
    search: Search;
    state: S;
    hash: Hash;
    key?: LocationKey;
}

所以为了可以在coding过程中愉快使用ts.需要扩展下Location类型，详见用法二

用法二：扩展Location类型

import { RouteComponentProps} from 'react-router-dom';
import H from 'history';
interface Location extends H.Location{
  query: {[key: string]: string};
}
export interface PageProps extends RouteComponentProps {
  location: Location;
}

提示：如果coding过程中没有使用location, 那么用法一就完全可以满足需求了