从反应类组件中的 URL 参数中捕获数据

Question

首先，我想向所有聪明的程序员表示感谢。更新 react-router-dom 后，我遇到了这个问题。这里我想提一件事，我是一个“类组件”爱好者。

但是，这是我在 react 中的基本组件。

import React, { Fragment, Component } from 'react'
import axios from 'axios'
import { Col , Row} from 'react-bootstrap'
import { Link } from 'react-router-dom'

export default class Blog extends Component {
    constructor(props) {
        super(props)
        this.state = {
             data:[]
        }
    }
    componentDidMount()
    {
        axios.get("https://jsonplaceholder.typicode.com/posts")
        .then((response)=>{
            if(response.status===200)
            {
                this.setState({
                    data:response.data
                })
            }
        })
        .catch((error)=>{})
    }
    
    render() {
        
        const allData = this.state.data;
        const blogFull = allData.map((val)=>{
            var title = val.title;
            var body = val.body;
            var id = val.id;
            return(
                <Col key={id} lg={4}>        
                    <Link to={"/post/"+id}><h1>{title}</h1></Link>
                        <p>{body}</p>
                </Col>
            )
        })
        return (
            <Fragment>
                <Row>
                {blogFull}
                </Row>
            </Fragment>
        )
    }
}

这是我的下一个组件

import axios from 'axios'
import React, { Component, Fragment } from 'react'
import { useParams } from 'react-router'

export default class Post extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            
            mydata:[],
        }
    }

    componentDidMount()
    {
        axios.get("https://jsonplaceholder.typicode.com/posts/")
        .then((response)=>{
            if(response.status===200)
            {
                this.setState({
                    mydata:response.data
                })
            }
        })
        .catch((error)=>{

        })
    }
    
    render() {
        const dataAll = this.state.mydata;

        return (
            <Fragment>
            data retriving
                <h1>{dataAll.title}</h1>
                <p>{dataAll.body}</p>
            </Fragment>
        )
    }
}

我的路线在这里：

<Routes>
<Route exact path="/" element={<Blog/>}/>
<Route exact path="/post/:id" element={<Post/>}/>
</Routes>

谁能告诉我如何通过 url 参数从基础组件获取 post 组件中的数据？ “匹配”对象在 react-router-dom 的当前更新中不起作用。我需要关于类组件的帮助。

Answer 1

问题

在 react-router-dom v6 中，Route 组件不再具有路由属性（history、location 和 match），当前的解决方案是使用这些的 React 钩子“版本”在被渲染的组件中使用。但是 React 钩子不能在类组件中使用。

要使用类组件访问匹配参数，您必须转换为函数组件，或滚动您自己的自定义 withRouter 高阶组件以注入“路由道具”，例如来自 react-router-dom v5 的 withRouter HOC .x 做到了。

解决方案

我不会介绍将类组件转换为函数组件。这是一个示例自定义withRouter HOC：

const withRouter = WrappedComponent => props => {
  const params = useParams();
  // etc... other react-router-dom v6 hooks

  return (
    <WrappedComponent
      {...props}
      params={params}
      // etc...
    />
  );
};

并用新的 HOC 装饰组件。

export default withRouter(Post);

这将为类组件注入一个params 属性。

this.props.params.id