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?

I guess you are using useParams from react-router?

duc mai
– duc mai

2021-10-03 10:54:58 +00:00
Commented Oct 3, 2021 at 10:54 — duc mai
– duc mai, Commented Oct 3, 2021 at 10:54

Yaya · Accepted Answer · 2021-10-03 10:47:59Z

2

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

edited Oct 3, 2021 at 10:47

answered Oct 2, 2021 at 23:58

Yaya

4,9065 gold badges28 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Peter Penzov Over a year ago

Can you show me how I can implement this with useParams, please?

Yaya Over a year ago

I think with this approach you don't need to use useParams.

Yaya Over a year ago

See updates in the answer.

Yaya Over a year ago

Also have a look at this codesandbox.io/s/peaceful-https-vz9y3?file=/src/App.js

Yaya Over a year ago

Try to add query strings to url in sandbox's simulator.

|

duc mai · Accepted Answer · 2021-10-03 10:58:54Z

1

I guess you are using useParams from react-router. If so then try so here

 let { ids } = useParams<{ ids: Array<any>}>();

answered Oct 3, 2021 at 10:58

duc mai

1,4222 gold badges11 silver badges17 bronze badges

2 Comments

Matt Morgan Over a year ago

It would be better if the type weren't any, but instead included the expected fields.

duc mai Over a year ago

Yep it can be better as you suggested. My quick solution is just to fix the typescripts issue

Tobias S. · Accepted Answer · 2021-10-02 23:34:33Z

-1

You are pushing a wrong path to the history. Try it like this:

history.push(`/ticket-profile/${id}`)

answered Oct 2, 2021 at 23:34

Tobias S.

24.3k7 gold badges37 silver badges64 bronze badges

1 Comment

Peter Penzov Over a year ago

It's not working again.

Collectives™ on Stack Overflow

Get values from url using useParams

3 Answers 3

Update:

6 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update:

6 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related