如何从类中的 react-router-dom v6 获取参数值答案

【问题标题】：How to get parameter value from react-router-dom v6 in class如何从类中的 react-router-dom v6 获取参数值
【发布时间】：2020-10-03 11:52:34
【问题描述】：

我用的是 react-router-dom v6 不知道如何获取参数值

例如：http://localhost:3000/user/:id

我想得到:id

有人使用钩子useParams 来获取，但我正在使用类，所以我不能使用钩子。

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

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 用可选的 Params 和 State 类型扩展 RoutedProps

【讨论】：

不应该 location 是 Location 类型（从 react-router 导出）和 params 类型 URLSearchParams？

【解决方案2】：

库提供的 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/7256t

【讨论】：

【解决方案3】：

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

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

在这个 ManageUser 组件中，您正在执行 mapStateToProps 您可以像这样使用：

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

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

【讨论】：

【解决方案4】：

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

export withRouter(YourComponent)

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

【讨论】：

我正在使用 react-router-dom v6 并且 withRouter 不可用：'withRouter' is not exported from 'react-router-dom'
@AnDương 你有理由需要使用 v6 吗？
是的，它很轻，有插座非常有用
以及不能使用功能组件的原因？