Tengo un formulario React con Material-UI. Me gustaría obtener la identificación del enlace URL usando useParams y realizar algunas solicitudes de API para completar los datos del formulario:
http://localhost:3001/ticket-profile/9459377Aplicación principal.tsx:
function App() { return ( <Router> <Navbar /> <Switch> <Route path='/ticket-profile/:id' component={TicketProfile} /> </Switch> </Router> ); } Uso este código para abrir una nueva página y pasar el parámetro de id :
history.push(`/ticket-profile/${id}`)Necesito obtener los datos en esta página:
export default function TicketProfile(props: any) { let { id } = useParams(); const [ticket, setTicket] = useState<TicketDTO[]>([]); useEffect(() => { getSingleTicket(); }, []); const getSingleTicket = async () => { getTicket(id) .then((resp) => { setTicket(resp.data); } Pero para esta línea let { id } obtengo:
TS2339: Property 'id' does not exist on type '{}'.
¿Sabes cómo puedo solucionar este problema?
El uso de React Router con mecanografiado sugiere que debe aprobar lo que está esperando.
De la página:
El método useParams() devuelve un objeto y, al tomar directamente la propiedad TS, se indicará que la propiedad no existe en el objeto vacío. Según la especificación de TS, se puede definir una interfaz en el componente de enrutamiento dinámico para definir los parámetros de enrutamiento.
Ejemplo:
// Home.tsx interface RouteParams { id: string } export default () => { const params = useParams<RouteParams>(); return ( <div> { params.id } </div> ) }Utilizar este:
let { id } = useParams<{id: string}>();