使用react路由器，无法提取参数，即使它们在那里(使用typescript)

React 路由器是 React 应用中常用的路由管理工具，它可以帮助我们实现页面之间的跳转和参数传递。在使用 React 路由器时，如果无法提取参数，可能是由于以下几个原因导致的：

路由配置问题：首先，需要确保你的路由配置正确。在 React 路由器中，可以使用 <Route> 组件来定义路由规则，并使用 path 属性指定路由路径，例如：

<Route path="/users/:id" component={UserDetail} />

上述代码中的 :id 表示一个参数，可以在 UserDetail 组件中通过 props.match.params.id 来获取该参数的值。

参数传递方式问题：如果你是通过链接跳转到目标页面，并希望传递参数，可以使用 <Link> 组件或 history.push 方法来生成链接。例如：

<Link to={`/users/${userId}`}>用户详情</Link>

或

history.push(`/users/${userId}`);

其中，userId 是要传递的参数值。

参数提取问题：在目标页面中，需要通过 props.match.params 来获取路由参数。如果你使用 TypeScript 进行开发，可以在组件的 props 类型中定义路由参数的类型。例如：

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

interface MatchParams {
  id: string;
}

interface UserDetailProps extends RouteComponentProps<MatchParams> {
  // 其他 props
}

const UserDetail: React.FC<UserDetailProps> = (props) => {
  const { id } = props.match.params;
  // 使用 id 进行后续操作
  // ...
};

在上述代码中，MatchParams 定义了路由参数的类型，UserDetailProps 则是组件的 props 类型，通过 RouteComponentProps<MatchParams> 将路由参数类型传递给组件。

总结起来，使用 React 路由器提取参数的步骤如下：