React/Typescript路由props应使用什么类型？如何从中获取查询参数值？

方法1：使用浏览器原生URLSearchParams（无额外依赖，优先推荐） #

现代浏览器内置了URLSearchParams API，不需要自行写解析逻辑，也不需要安装第三方依赖，直接处理你拿到的props.location.search即可：

const Auth = (props: RouteComponentProps) => {
  const searchParams = new URLSearchParams(props.location.search);
  // 直接获取redirect_to参数值
  const redirectTo = searchParams.get('redirect_to');
  
  // 配套常用方法
  // 判断参数是否存在：searchParams.has('redirect_to')
  // 获取同键名的多个参数值：searchParams.getAll('xxx')
}

方法2：React Router v6 内置Hook（如果你用的是v6版本） #

如果你的项目已经升级到React Router v6，可以直接用官方提供的useSearchParams Hook，写法更简洁：

import { useSearchParams } from 'react-router-dom';

const Auth = () => {
  const [searchParams] = useSearchParams();
  const redirectTo = searchParams.get('redirect_to');
}

额外注意事项 #

你当前AppRoute的实现存在传参错误，现在的写法是把所有路由props挂载到了组件的props.props属性下，正确的写法应该把路由props展开传递：

<Route
  {...rest}
  render={(routeProps) => <Component {...routeProps}/>}
/>

如果项目中已经引入了query-string这类常用的查询参数处理库，也可以直接调用它的parse方法处理props.location.search，效果和原生API一致。

内容的提问来源于stack exchange，提问作者Leff