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=9459377Aplicació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=9459377en 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}`)