I have a React form with Material-UI. I would like to get the id from the URL link using useParams and make some API requests in order to populate form-data:
http://localhost:3001/profile?ids=9459377
Main app.tsx:
function App() {
return (
<Router>
<Navbar />
<Switch>
<Route path='/ticket-profile/:ids' component={TicketProfile} />
</Switch>
</Router>
);
}
I use this code to open a new page and pass ids param:
history.push(`/ticket-profile/ids=${id}`)
I need to get the data into this page:
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);
});
}
But for this line let { ids } I get:
TS2339: Property 'ids' does not exist on type '{}'.
Do you know how I can fix this issue?
So this is the url
http://localhost:3001/profile?ids=9459377
In your code
const MyComponent = () => {
const params = new URLSearchParams(window.location.search);
That's it! Now we should move on to getting the value and checking the existence of the query strings
Check if it has the query;
params.has('ids')
or get the value that is inside the query string
params.get('ids')
You can also show them conditionally
console.log(params.has('ids')?params.get('ids'):"")
https://codesandbox.io/s/peaceful-https-vz9y3?file=/src/App.js\ This is how we should use it in your case
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);
});
}
I guess you are using useParams from react-router. If so then try so here
let { ids } = useParams<{ ids: Array<any>}>();
You are pushing a wrong path to the history. Try it like this:
history.push(`/ticket-profile/${id}`)