Soy nuevo en reactJS y necesito una respuesta para este problema confuso.

Tengo una página de destino que quiero usar en mi página de inicio y contacto. Lo que quiero es enviar información JSON externa como accesorios a estas páginas y cada vez que creo una nueva página.

Tengo un archivo JSON externo y quiero agregarlo como accesorios a mi archivo de página de destino. ¿Cuál es la mejor práctica para hacerlo? ¿Debería guardar dentro de un estado y enviarlo como accesorios o enviarlo directamente como accesorios?

Archivo JSON:

 { "landing page" : { "home": { "id":1, "image": "../media/video/Ai Motion5.mp4", "title" : "MyAkbar for IT consultant & Services", "description":"Boost up Your Works With our Services. My Incrediable Team is Here to Save Your Time and Money.", "buttonOne": "Get A Demo" }, "Contact" : { "id":2, "image": "../media/video/Ai Motion5.mp4", "title" : "Contact", "description":"sdadasdskdjaskljdas Team is Here to Save Your Time and Money.", "buttonOne": "Get A Demo" } } }

Archivo de inicio:

 import React, { Component } from 'react' import LandingPage from "./landingPage/LandingPage" import WaveSection from './waveSection/WaveSection' import MyReview from "./reviewSection/MyReview" import './styles/style.css' import data from '../../json/data.json'; class Home extends Component{ render(){ return( <div id='home' className='home'> <LandingPage title = {data['landing page'].home.title} img = {data['landing page'].home.image} description ={data['landing page'].home.description} btn = {data['landing page'].home.buttonOne} /> <WaveSection/> <MyReview/> </div> ) } } export default Home

Archivo de contacto:

 import React, { Component } from 'react' import video from '../../media/video/Ai Motion.mp4'; class Contact extends Component{ render(){ return( <section className='contact-section landingPage-section'> <div className="container"> <video autoPlay muted loop="True" id='myVideo' src={video}></video> </div> </section> ) } } export default Contact