如何在类中从 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 t

Answer 2

Typescript HoC

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 使用可选的参数和状态类型扩展 RoutedProps

Answer 3

如果你正在使用 react-redux，这个例子会对你有所帮助。 在定义路由的位置，使用该组件，如下所示：

<Route path="/user" component={ManageUser} />
<Route path="/user/:id" component={ManageUser} />

在此管理用户组件中，您正在执行mapStateToProps可以像这样使用：

function mapStateToProps(state, ownProps) {
const id = ownProps.match.params.id;
// get the user
const contextuser = getUserById(state.users, id);
return {
contextuser; contextuser
};
}

通过这种方式，您可以将用户传递给您的组件。

Answer 4

import { withRouter } from 'react-router-dom'

export withRouter(YourComponent)

然后访问组件中的this.props.match.params