Question

我想在React中基于类的组件中使用useRouteMatch钩子，因为它简化了将参数传递给组件的过程。在类组件内部使用此挂钩会引发错误。在React类中使用此钩子等效什么？

Answer 1

您可以使用withRouter HOC，然后在包装的组件props中将有match个对象：

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

class SomeClassComponent extends React.Component {

  render(){
    console.log(this.props.match) // match object
    return(<span />)
  }
}

export default withRouter(SomeClassComponent)

Answer 2

useRouteMatch可用于匹配特定的路由路径，甚至可获取currentRoute的匹配属性

对于类组件，您可以使用matchPath来获得相同的行为

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

class App extends React.Component {
  someFunc = () => {
     const match = matchPath("/users/123", {
        path: "/users/:id",
        exact: true,
       strict: false
     });
     ...
   }
}

对于当前的路线匹配，如果组件是Route的直接子代并呈现为组件，则可以直接从props获取匹配值。但是，如果不是，则可以从作为直接子级的父级传递匹配道具，也可以使用withRouter HOC

请检查blog post for more details

基于类的组件的useRouteMatch等效于什么？

2 个答案: