Aquí está mi código ************************************************** ******** Comp. de la aplicación

 function App() { const [shipNumber, setShipNumber] = useState(''); // every time return to the initial value here

El enrutamiento está aquí ==>

 <BrowserRouter> <div className="content"> <Routes> <Route exact path="/" element={ <Tracking shipNumber={shipNumber} setShipNumber = {setShipNumber} isChanged={isChanged} trackShipment={trackShipment}/>} /> <Route path="/status/:trackingnumber" element={<Status shipNumber={shipNumber} />} /> </Routes> </div> </BrowserRouter> </div> ); }

**************************************************** ************Compensación de seguimiento

 const Tracking = ( props) => { let navigate = useNavigate(); const handleChange=(e)=>{ e.preventDefault(); const trackingNo = e.target.value; props.setShipNumber(trackingNo); }; const handleClick =(e)=>{ e.preventDefault();

aquí está tratando de navegar

 navigate(`/status/${props.setIsChanged && props.shipNumber}`); }; <form type="submit" onSubmit={props.trackShipment}> <input onChange={handleChange} value={props.shipNumber} placeholder='Tracking No.' required></input>

Compensación de estado

 const Status = (props) => { const [shipment,setShipment]= useState(null);

===>

 const url = `https://tracking.bosta.co/shipments/track/${props.shipNumber}`; useEffect(()=>{ axios.get(url).then(response=>{ setShipment(response.data) }) },[url]);