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

Question

首先我要感谢所有聪明的程序员。更新后反应路由器Dom我面临这个问题。在这里我想提到一件事，我是一个“类组件”爱好者。

然而，这是我反应的基础组件。

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参数从基础组件中获取后组件中的数据？"匹配"对象在当前的react-router-dom更新中不工作。我需要类组件的帮助。

Answer 1

在react router dom v6中，路由组件不再具有路由道具（历史、位置和匹配），当前的解决方案是使用这些组件的react挂钩“版本”在渲染的组件中使用。不过，React钩子不能用于类组件中。

要使用类组件访问匹配参数，您必须将其转换为功能组件，或者使用路由器推出您自己的自定义高阶组件，以注入“路由道具”，就像路由器HOC from反应路由器domv5.x中的那样。

我将不介绍如何将类组件转换为函数组件。下面是一个使用路由器的自定义示例：

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);

这将为类组件注入一个paramsprop。

this.props.params.id