问将数据从一个组件推送到另一个组件

EN

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

function G() {
  return (
    <div className='bg-black '>
{data.filter(d =>
  d.classG &&
  d.imageG &&
  d.priceG)
  .map((postData) => {
        return (
          <div className='bg-black'  key={postData.id} >
            <div className='bg-black '>            
              <img
                alt=""
                className="w-full object-contain "
                src={postData.imageG}
              ></img>
              <h1 className=" ml-24 mlg:ml-6 mlg:mt-2 mlg:static text-5xl mlg:text-2xl text-blue-400 
               absolute top-48">
                {postData.classG}
              </h1>
              <h1 className="text-lg  mlg:mb-2 mlg:ml-6  mlg:mt-2 mlg:static font-bold text-green-800 
               font-mono ml-24 top-64  absolute" >
                {postData.priceG}
              </h1>
              <Link
                to={`/payment/${postData.id}`}
                className="py-1 px-2  mlg:ml-6 mlg:mt-14 mlg:static text-black-600 h-8  ml-24  top-72 bg- 
                white w-32 text-center text-gray-red
                rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600 absolute" 
              >
                Buy Now
              </Link>
              <div id='New' className="flex flex-col mt-40 justify-center border-white text-center items- 
                center bg-black" >
              <h1 className='tracking-tighter mb-20 text-white text-base md:text-6xl'>What's new in 
                2021</h1>  
              <h1 className=' md:p-4 md:w-2/4 font-sans mb-16 text-white '>{postData.newG} </h1>                  
              </div>   
               </div>
                 </div>
           )
            }
    export default G

json file
[
{
    "id":1,
    "classG":"G-Class",
    "imageG":"./ModImages/Gclass.jpg",
    "priceG":"Starting at $154,900"
    "newE": "some text"

},
]

Payment Component
import React from "react";
import data from "./Models/data.json";
function Payment(props) {
  console.log(props);
  const {
    match: {
    params: { dataId }
    }
  } = props;
  const item = data.find(({ id }) => id === Number(dataId));
  return (
    <div className="ml-20">        
      <pre>{JSON.stringify(item, null, 2)}</pre>
    </div>
  );
}
export default Payment;

App Component
import React,{useState, useEffect} from 'react'
import './assets/main.css'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <div className='' >     
      <div>
          <Router>       
             <Header />     
          <Switch>        
            <Route path="/a">
              <A />
            </Route>
             <Route path="/payment/:dataId" component={Payment}>
             </Route>
           </Switch>  
           </Router>
            </div>
               </div>

  );
}
export default App;