获取路由参数的几种方式

1、props.match.params

import React from 'react';
import { RouteConfigComponentProps } from 'react-router-config';

interface IParam {
  id?: string;
}

interface IProps extends RouteConfigComponentProps<IParam> {}

const Main = (props: IProps) => {
  const { id } = props.match.params;
  console.log('参数：', id)
  return (
    <div>
      123123
    </div>
  )
}

export default Main

这里需要指定路由参数的类型，不然Param类型默认是{}

export interface RouteConfigComponentProps<Params extends { [K in keyof Params]?: string } = {}> extends RouteComponentProps<Params> {
    route?: RouteConfig;
}


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

export interface match<Params extends { [K in keyof Params]?: string } = {}> {
    params: Params;
    isExact: boolean;
    path: string;
    url: string;
}

2、useParams

react-router-dom@5.x提供的hooks函数useParams，useParams直接返回路由参数对象

export function useParams<Params extends { [K in keyof Params]?: string } = {}>(): Params;

同样，useParams使用时需要指定Params类型

import React from 'react';
import { RouteConfigComponentProps } from 'react-router-config';
import { useParams } from 'react-router-dom';

interface IParam {
  id?: string;
}

interface IProps extends RouteConfigComponentProps<{}> {}

const Main = (props: IProps) => {

  const { id } = useParams<IParam>();
  console.log('参数：', id)
  return (
    <div>
      123123
    </div>
  )
}

export default Main

3、props.location.search

export interface History<HistoryLocationState = LocationState> {
    length: number;
    action: Action;
    location: Location<HistoryLocationState>;
    push(path: Path, state?: HistoryLocationState): void;
    push(location: LocationDescriptor<HistoryLocationState>): void;
    replace(path: Path, state?: HistoryLocationState): void;
    replace(location: LocationDescriptor<HistoryLocationState>): void;
    go(n: number): void;
    goBack(): void;
    goForward(): void;
    block(prompt?: boolean | string | TransitionPromptHook<HistoryLocationState>): UnregisterCallback;
    listen(listener: LocationListener<HistoryLocationState>): UnregisterCallback;
    createHref(location: LocationDescriptorObject<HistoryLocationState>): Href;
}

当页面不是用过路由传参（/about/:id），而是通过props.history.push({pathname: 'xxx', search: 'xxx'})跳转携带参数，这种场景下该如何获取参数呢？

A页面 跳转 B页面

import qs from 'query-string';

interface IProps extends RouteConfigComponentProps<{}> {

}

const A = (props: IProps) => {
    
    const gotoPage = () => {
        props.history.push({
          pathname: '/B', 
          search: qs.stringify({id: 123123})
        })
    }
    
    return (
        <button onClick={gotoPage}>goto B page</button>
    )    
   
}

export default A;

B页面接收参数

import qs from 'query-string';

interface IProps extends RouteConfigComponentProps<{}> {}

const B = (props: IProps) => {
    const { id } = qs.parse(props.location.search);
    console.log('参数：', id)
    return (
        <div>
          123123
        </div>
    )
}

export default B;