Actualmente estoy trabajando en un proyecto personal solo para mejorar un poco el uso de reaccionar.

Yo uso react-router para la navegación. Mi archivo index.js tiene lo siguiente

 import { render } from "react-dom"; import App from "./App"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import TukTukTours from "./components/TukTukTours"; import BycicleTours from "./components/BicycleTours"; import WalkingTours from "./components/WalkingTours"; const rootElement = document.getElementById("root"); render( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path='tuktuktours' element={<TukTukTours/>}/> <Route path='bycicletours' element={<BycicleTours/>}/> <Route path='walkingtours' element={<WalkingTours/>}/> </Routes> </BrowserRouter>, rootElement );

El componente de la aplicación es lo que carga la página principal básicamente, tengo una barra de navegación allí que tiene un cuadro de selección que cambia entre dos idiomas. Una vez que el usuario cambia todo el texto de la página cambia de un idioma a otro. Quiero que suceda lo mismo en mis otras tres páginas (Rutas arriba).

Para eso, quiero pasar una variable de estado a App, WalkingTours, BycicleTours y TukTukTours para cambiar dinámicamente el contenido de las páginas.

La forma en que he estructurado index.js no parece que pueda usar useState hook para lograr lo que quiero. Algo similar a lo de abajo;

 import { render } from "react-dom"; import App from "./App"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import TukTukTours from "./components/TukTukTours"; import BycicleTours from "./components/BicycleTours"; import WalkingTours from "./components/WalkingTours"; import { useState } from "react"; const [language, setLanguage] = useState("GB"); const changeLanguage = (language) => setLang(language); const rootElement = document.getElementById("root"); render( <BrowserRouter> <Routes> <Route path="/" element={<App language={language} setLang={changeLanguage} />} /> <Route path='tuktuktours' element={<TukTukTours language={language}/>}/> <Route path='bycicletours' element={<BycicleTours language={language}/>}/> <Route path='walkingtours' element={<WalkingTours language={language}/>}/> </Routes> </BrowserRouter>, rootElement );

Sé que lo anterior no es válido porque no puedo usar ganchos fuera de los componentes de la función de reacción o funciones de gancho personalizadas.

¿Cuál sería la mejor manera de lograr lo que tengo arriba?

Muchas gracias