首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在类中从react-router-dom v6中获取参数值

如何在类中从react-router-dom v6中获取参数值
EN

Stack Overflow用户
提问于 2020-06-14 04:08:15
回答 4查看 4.5K关注 0票数 0

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

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

我想让:id

有人使用钩子useParams来获取,但我使用的是类,所以我不能使用钩子。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2020-07-13 21:40:40

React Router v6中已弃用库提供的HOC withRouter。如果您需要使用v6并使用基于类的React组件,那么您将需要编写自己的HOC,它使用*钩子包装v6。

例如:

代码语言:javascript
复制
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

票数 5
EN

Stack Overflow用户

发布于 2021-01-19 23:11:35

Typescript HoC

代码语言:javascript
复制
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

票数 2
EN

Stack Overflow用户

发布于 2020-06-14 04:14:58

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

export withRouter(YourComponent)

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62365009

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档