Get values from url using useParams

Question

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?

Answer 1

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'):"")

Update:

Check out the working example

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);
            });
    }