javascript - Passing data via React Router

Question

So I have a problem with passing data from one Component to another. So I have Free To Play Component which has is taking freetoplay data from json and displaying. I have also a Link which should open up a Payment Route and pass the data from the Component that is pressed, In the Payment I have a filter function, which is fitering objects based on their id, Anyway when I press on the Link, it should render the image class and price, but it does not, I dont know why, its says image not defined Action is in another Component its taking the data from action object in json. Freetoplay is also anotherComponent it is taking the data from freetoplay Object in json.But anyway I would need to create "better filter function" in Payment in order to achieve the thing I want to – If anyone could help me I would be very grateful. Cheers

import React from 'react'
import { useParams, Link } from "react-router-dom";
import data from "../data.json";

function Payment() {  
    const { productId } = useParams();
    const filteredData = data.filter((product) => product.id === productId)[0];
    return (
        <div  className='Payment'>
         <img src={filteredData.image}></img>
         <h1>{filteredData.price}</h1>
         <h1>{filteredData.name}</h1>          
        </div>
    )
}

export default Payment

import React from 'react'
import data from "./data.json";
import {
    
    Link
  } from "react-router-dom";
import { SearchContext } from './SearchContext';


function FreeToPlay() {
  const {filterProduct}=React.useContext(SearchContext);
    return (
        <>
          <div className='All' >
            {data[0].freetoplay.filter(filterProduct).map((product) => {
              return (
                <div className='f2p' key={product.id}>               
                    <img src={product.image}></img>
                    <h2>{product.name}</h2>
                    <h5>{product.price}</h5>
                  <Link
            to={`/payment/${product.id}`}
            className='link'
           >
            Buy Now
           </Link>
        </div>
              );
            })}
          </div>
        </>
      );
}

export default FreeToPlay

json
[
  {
    "freetoplay": [{
        "id": "0",
        "image": "src=fsdf",
        "price": "60$",
        "name": "CS Go"
      },
      {
        "id": "1",
        "image": "src=fsdf",
        "price": "6$",
        "name": "Fifa"
      }
    ],
 
    "action": [{
        "id": "2",
        "image": "src=fsdf",
        "price": "60$",
        "name": "doom"
      },
      {
        "id": "3",
        "image": "src=fsdf",
        "price": "66$",
        "name": "cyberpunk"
      }
    ],
    
  }
]


this is the Route

 <Route exact path="/payment/:productId">
            <Payment/>
 </Route> 

Context but it is not so important

import React, { useState, useContext } from 'react';

export const SearchContext =React.createContext(null)
export  default function SearchProvider({children}) {

const [searchValue, setSearchValue] = React.useState("");


function filterProduct(product) {
     return product.name.toLowerCase().includes(searchValue.toLowerCase());
     }
      return( 

       <SearchContext.Provider value ={{filterProduct,   searchValue, setSearchValue}}>
             {children} 
        </SearchContext.Provider> 
             
             ); }

Answer 1

等待大神答复