TypeError: Cannot read property ‘state’ of undefined (Giving props through link)

I can’t retrieve the props gived on the Link attribute.

Here is the code of my Link class component :

export default class ChooseReserv extends Component {
    token = localStorage.getItem('token');
    state = {nb: 1, html : []};
    test = 0;

    componentDidMount = () =>  {
        axios.get('Parking', {headers: {'Authorization': 'Bearer ' + this.token}}).then(
        res => {
            console.log(res.data)
            this.loadAllUsers(res.data);
        },
        err => {
            console.log(err);
        })
    }

    loadAllUsers = (data) => {
    for (var i = 0; i < data.length; i++) {
        var value = (
            <div id={data[i].id}>
                {data[i].name}
                <button style={{marginLeft: "50px"}} type="button" class="btn btn-secondary"><Link style={{color: "white"}} className="nav-link" to={{
                    pathname:'/myReserv', 
                    state: {
                        data: data[i]
                    }
                }}>Go</Link></button>
                <p></p>
            </div>
        )
        this.setState({ html: this.state.html.concat([value]) })
    }
}

    render() {
        var htmle = this.state.html;
        console.log("html" + htmle);
        if (this.props.connected == 'false') {
            return <Redirect to={'/'}/>;
        }
        return (
            <div>
                <br></br>
                <h1>Réserver votre place de parking !</h1>
                <div className="auth-wrapper">
                    <div className="auth-inner">
                         {htmle}
                    </div>
                </div>
            </div>
        )
    }
}

And i’m trying to retrieve the props in the Redirect page like that :

export default class MyReserv extends Component {
    token = localStorage.getItem('token');
      
      componentDidMount = () => {
        console.log(this.props.location.state.data);
      }

      
    render() {
        if (this.props.connected == 'false') {
            return <Redirect to={'/'}/>;
        }
        return (
            <div className="auth-wrapper">
            <div className="auth-inner">
            <h2>Bienvenue .</h2>
            </div>
            </div>
        )
    }
}

But React is giving me an error.. : “TypeError: Cannot read property ‘state’ of undefined”

So how can i retrieve these data ? (im on React-router v5.2)

Answer

import { withRouter } from "react-router-dom";

class MyReserv extends Component {
    token = localStorage.getItem('token');
      
      componentDidMount = () => {
        console.log(this.props.location.state.data);
      }

      
    render() {
        if (this.props.connected == 'false') {
            return <Redirect to={'/'}/>;
        }
        return (
            <div className="auth-wrapper">
            <div className="auth-inner">
            <h2>Bienvenue .</h2>
            </div>
            </div>
        )
    }
}

export default withRouter(MyReserv);