Catch Data from URL params in react class Compoent

Question

First of all I like to convey thanks all the wise programmer. After updating react react-router-dom i am facing this problem. Here i want to mention one thing that, i am a "class component" lover.

However, This is my base component in 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>
        )
    }
}

and this is my next component

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

My Route is here :

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

Can anyone tell me that how can i get data in post component from base component via its url parameter? The "match" object is not working in current update of react-router-dom. I want help for class component.

Answer 1

Issue

In react-router-dom v6 the Route components no longer have route props (history, location, and match), and the current solution is to use the React hooks "versions" of these to use within the components being rendered. React hooks can't be used in class components though.

To access the match params with a class component you must either convert to a function component, or roll your own custom withRouter Higher Order Component to inject the "route props" like the withRouter HOC from react-router-dom v5.x did.

Solution

I won't cover converting a class component to function component. Here's an example custom withRouter HOC:

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

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

And decorate the component with the new HOC.

export default withRouter(Post);

This will inject a params prop for the class component.

this.props.params.id