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/profile?ids=9459377
Aplicación principal.tsx:
function App() { return ( <Router> <Navbar /> <Switch> <Route path='/ticket-profile/:ids' component={TicketProfile} /> </Switch> </Router> ); }
Uso este código para abrir una nueva página y pasar ids
param:
history.push(`/ticket-profile/ids=${id}`)
Necesito obtener los datos en esta página:
export default function TicketProfile(props: any) { let { ids } = useParams(); const [ticket, setTicket] = useState<TicketDTO[]>([]); useEffect(() => { getSingleTicket(); }, []); const getSingleTicket = async () => { getTicket(ids) .then((resp) => { setTicket(resp.data); }) .catch((error) => { console.error(error); }); }
Pero para esta línea let { ids }
obtengo:
TS2339: Property 'ids' does not exist on type '{}'.
¿Sabes cómo puedo solucionar este problema?
Entonces esta es la URL
http://localhost:3001/profile?ids=9459377
en tu codigo
const MyComponent = () => { const params = new URLSearchParams(window.location.search);
¡Eso es todo! Ahora debemos pasar a obtener el valor y verificar la existencia de las cadenas de consulta.
Compruebe si tiene la consulta;
params.has('ids')
u obtenga el valor que está dentro de la cadena de consulta
params.get('ids')
También puedes mostrarlos condicionalmente.
console.log(params.has('ids')?params.get('ids'):"")
https://codesandbox.io/s/peaceful-https-vz9y3?file=/src/App.js\ Así es como deberíamos usarlo en tu caso
export default function TicketProfile(props: any) { const params = new URLSearchParams(window.location.search); const ids = params.get('ids'); const [ticket, setTicket] = useState<TicketDTO[]>([]); useEffect(() => { getSingleTicket(); }, []); const getSingleTicket = async () => { getTicket(ids) .then((resp) => { setTicket(resp.data); }) .catch((error) => { console.error(error); }); }
Supongo que estás usando useParams de react-router. Si es así, inténtalo aquí.
let { ids } = useParams<{ ids: Array<any>}>();
Estás empujando un camino equivocado a la historia. Pruébalo así:
history.push(`/ticket-profile/${id}`)