... import { useNavigate, NavigateFunction } from "react-router"; ... function Form(): JSX.Element { const navigate: NavigateFunction = useNavigate(); const [country, setCountry] = useState<string>(" "); const handleChange = (e: ChangeEvent<HTMLInputElement>): void => { setCountry(e.target.value); }; const handleSubmit = (e: FormEvent<HTMLFormElement>): void => { e.preventDefault(); navigate("/country"); }; return ( <Box component="form" onSubmit={handleSubmit}> <input type={"text"} required placeholder="Enter Country" value={country} onChange={handleChange} ></input> <Button variant={"contained"} type="submit"> Search </Button> </Box> ); } export default Form;

este es mi archivo index.tsx:

 ReactDOM.render( <React.StrictMode> <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="/country" element={<CountryDetails />} /> </Routes> </BrowserRouter> </React.StrictMode>, document.getElementById("root") );

este es mi archivo CountryDetails.tsx:

 const CountryDetails = (): JSX.Element => { const country: string | undefined = useParams().name; return ( <Box> hi ${country} </Box> ) } export default CountryDetails;

Quiero enviar la variable de país de Form.tsx al archivo CountryDetails.tsx. como lo envio Estoy haciendo las operaciones de ruta en el archivo de índice. Intenté enviarlo como accesorios, también como estado, incluso usé link to lugar de la función de navegación. También usé history.push. Por favor ayuda.