title: How to pass params into link using React router v6?
body: <p>This is my main section class where all routes to the links is kept</p>
  <pre><code>export default class Section extends React.Component {
      render() {
          return (
              &lt;div style={{backgroundColor:&quot;white&quot;}}&gt;
                     &lt;Routes&gt;
                     &lt;Route path=&quot;/&quot;  element={&lt;Home/&gt;} /&gt;
                      &lt;Route path=&quot;/discover&quot; element={&lt;Discover/&gt;}   /&gt;
                      &lt;Route path=&quot;/shop/makeup&quot; element={&lt;Makeup/&gt;}  /&gt;
                      &lt;Route path=&quot;/home/:id&quot; element={&lt;DetailsPage/&gt;}  /&gt;
                      &lt;/Routes&gt;
              &lt;/div&gt;
          )}}
  </code></pre>
  <p>This is my card page which is getting data from the context.</p>
  <pre><code>import React from 'react';
  import {DataContext} from './CardData.js';
  import {Link} from 'react-router-dom'
  import '../App.css';
  export default class HomeCard extends React.Component {
      static contextType = DataContext;
      render(){
          const {products} = this.context;
    return (
      &lt;div&gt;
        &lt;div className=&quot;card&quot;&gt;
                  { products.map((val,index)=&gt;{
                     return(
                      &lt;div className=&quot;card&quot; key={val.id}&gt;
                      &lt;Card style={{ width: '14rem' }}  className=&quot;cardhead&quot;&gt;
    &lt;Card.Img variant=&quot;top&quot; src={val.imgsrc} className=&quot;cardimg&quot;/&gt;
    &lt;Card.Body&gt;
      &lt;Card.Text&gt;{val.mname}
      &lt;/Card.Text&gt;
      &lt;Card
  </code></pre>
  <p>From here i had passed the val.id to the url of the page using LINK</p>
  <pre><code>    &lt;Link to={`/home/${val.id}`}&gt;
      &lt;Button className=&quot;overlay&quot; variant=&quot;primary&quot;&gt;
        {/* &lt;a  style={{color:&quot;white&quot;}} href={props.link} className=&quot;card-link&quot;&gt;View&lt;/a&gt; */}
        View&lt;/Button&gt; &lt;/Link&gt;
      &lt;Card.Text&gt;&lt;strong&gt;{val.price}&lt;/strong&gt;
      &lt;/Card.Text&gt;
      &lt;Card.Text&gt;&lt;strong&gt;{val.id}&lt;/strong&gt;
      &lt;/Card.Text&gt;
      &lt;/Card.Footer&gt;
    &lt;/Card.Body&gt;
  &lt;/Card&gt;
  &lt;/div&gt;);                
      &lt;/div&gt;
    )}}
  </code></pre>
  <p>I want to access the the link url into the details page of my product which is as follows :</p>
  <pre><code>export default class DetailsPage extends React.Component {
      static contextType = DataContext;
      state = {
          product: []
      }
      getProduct = () =&gt;{
          if(this.props.match.params.id){
              const res = this.context.products;
              const data = res.filter(item =&gt;{
                  return item.id === this.props.match.params.id
              })
              this.setState({product: data})
          }};
      componentDidMount(){
          this.getProduct();
      }
      render() {
          const {product} = this.state;
          const {addCart} = this.context;
          return (
              &lt;&gt;
                  {product.map(item =&gt;(
                          &lt;div className=&quot;details&quot; key={item.id}&gt;
                              &lt;img src={item.imgsrc} alt=&quot;&quot;/&gt;
                              &lt;div className=&quot;box&quot;&gt;
                                  &lt;div className=&quot;row&quot;&gt;
                                      &lt;h2&gt;{item.mname}&lt;/h2&gt;
                                      &lt;span&gt;${item.price}&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;Link to=&quot;/cart&quot; className=&quot;cart&quot; onClick={() =&gt; addCart(item.id)}&gt;
                                      Add to cart
                                  &lt;/Link&gt;
                              &lt;/div&gt;   &lt;/div&gt;  ))} &lt;/&gt; )  }}
  </code></pre>
  <p>Unfortunately it is giving an error saying TypeError: Cannot read property 'params' of undefined</p>