TypeError: Cannot read properties of undefined (reading 'params') Django + React

Uncaught TypeError: Cannot read properties of undefined (reading 'params')
Unabel to navigate to id can anyone help?
i am woriking on django as backend and react as frontend

class ArticleDetail extends  React.Component{

    state={
        article:{}
    }
    componentDidMount(){
        const id = this.props.match.params.id;
      
      axios.get(`http://127.0.0.1:8000/api/${id}`)
      .then(res =>{
        this.setState({
            article:res.data
        });
        console.log(res.data)
       
      })

    }
    render(){
        return(
           
            <Card title={this.state.article.title} >
                <p>{this.state.article.content }</p>
            </Card>
        )
    }
}```


TypeError: Cannot read properties of undefined (reading 'params') Unabel to navigate to id can anyone help?
i am working on react + django. My data from server in list is showing but when i try to navigate to particular data id it shows error

</details>


# 答案1
**得分**: 0

这应该是一个前端问题。

1-) 在你的类的开头添加以下代码行：

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

2-) 然后在你的类上方添加此函数（完全复制）：

     export function withRouter(Children){
     return(props)=>{
    
        const match  = {params: useParams()};
        return <Children {...props}  match = {match}/>;
      }
     }

3-) 接下来，将你的类定义更改为：

    class ArticleDetail extends Component

4-) 在你的类的末尾添加以下代码行：

    export default withRouter(ArticleDetail);

参考链接：https://stackoverflow.com/a/75304487/11897778

如果不起作用，请提供有关错误的更多详细信息，例如API请求是否正在进行或在进行API请求之前是否失败？

<details>
<summary>英文:</summary>

This should be a frontend problem.



1-) Add the following line of code at the beginning of your class:

    import { useParams } from &#39;react-router-dom&#39;;

2-) Then add this function above your class (copy it exactly):

     export function withRouter(Children){
     return(props)=&gt;{
    
        const match  = {params: useParams()};
        return &lt;Children {...props}  match = {match}/&gt;
      }
     }

3-) Next, change your class definition to this:

    class ArticleDetail extends Component

4-) Add the following line of code at the end of your class:

    export default withRouter(ArticleDetail);

Ref: https://stackoverflow.com/a/75304487/11897778

If it doesn&#39;t work, please provide more details about the error, if the API request is being made or is it failing before making the API request?



</details>



# 答案2
**得分**: 0

这对我有用
感谢Jesus Fung的帮助

```jsx
import React from "react";
import axios from 'axios';
import { Card } from "antd";
import { useParams } from "react-router-dom";

export function withRouter(Children){
    return(props)=>{
        const match = { params: useParams() };
        return <Children {...props} match={match}/>;
    }
}

class ArticleDetail extends React.Component{
    state = {
        article: {}
    }
    
    componentDidMount(){
        const id = this.props.match.params.id;
        
        axios.get(`http://127.0.0.1:8000/api/${id}`)
        .then(res =>{
            this.setState({
                article: res.data
            });
            console.log(res.data)
        })
    }
    
    render(){
        return(
            <Card title={this.state.article.title} >
                <p>{this.state.article.content }</p>
            </Card>
        )
    }
}

export default withRouter(ArticleDetail);

注意：翻译中的代码部分保持原样，未进行翻译。

import React from "react";

import axios from 'axios';
import {Card}  from "antd";
import { useParams } from "react-router-dom";


export function withRouter(Children){
    return(props)=>{
   
       const match  = {params: useParams()};
       return <Children {...props}  match = {match}/>
     }
    }

class ArticleDetail extends  React.Component{
      
    state={
        article:{}
    }
    componentDidMount(){
        const id = this.props.match.params.id;
       
        
      
      axios.get(`http://127.0.0.1:8000/api/${id}`)
      .then(res =>{
        this.setState({
            article:res.data
        });
        console.log(res.data)
       
      })

    }
    render(){
        return(
           
            <Card title={this.state.article.title} >
                <p>{this.state.article.content }</p>
            </Card>
        )
    }
}
export default withRouter(ArticleDetail);