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/ticket-profile/9459377

Main app.tsx:

function App() {
  return (
      <Router>
        <Navbar />
        <Switch>
          <Route path='/ticket-profile/:id' ponent={TicketProfile} />
        </Switch>
      </Router>
  );
}

I use this code to open a new page and pass id param:

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

I need to get the data into this page:

export default function TicketProfile(props: any) {
    let { id } = useParams();
    
    const [ticket, setTicket] = useState<TicketDTO[]>([]);

    useEffect(() => {
        getSingleTicket();    
    }, []);

    const getSingleTicket = async () => {
        getTicket(id)
            .then((resp) => {
                setTicket(resp.data);               
    }

But for this line let { id } I get:

TS2339: Property 'id' does not exist on type '{}'.

Do you know how I can fix this issue?

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/ticket-profile/9459377

Main app.tsx:

function App() {
  return (
      <Router>
        <Navbar />
        <Switch>
          <Route path='/ticket-profile/:id' ponent={TicketProfile} />
        </Switch>
      </Router>
  );
}

I use this code to open a new page and pass id param:

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

I need to get the data into this page:

export default function TicketProfile(props: any) {
    let { id } = useParams();
    
    const [ticket, setTicket] = useState<TicketDTO[]>([]);

    useEffect(() => {
        getSingleTicket();    
    }, []);

    const getSingleTicket = async () => {
        getTicket(id)
            .then((resp) => {
                setTicket(resp.data);               
    }

But for this line let { id } I get:

TS2339: Property 'id' does not exist on type '{}'.

Do you know how I can fix this issue?

• javascript
• reactjs
• typescript
• react-router
• react-router-dom

• Try useParams<{id: string}>() or something like that – Shivam Jha Commented Oct 3, 2021 at 9:20
• you have to pass the id route param in TicketProfile's props in Router – Nikos M. Commented Oct 3, 2021 at 9:20

1 Answer 1

Using React Router with typescript suggests you need to pass the you are expecting.

From the page:

The useParams() method returns an object, and directly taking the property TS will prompt that the property does not exist in the empty object. According to the specification of TS, an interface can be defined in the dynamic routing ponent to define the parameters of routing.

Example:

// Home.tsx
interface RouteParams {
    id: string
}
export default () => {
    const params = useParams<RouteParams>();
    return (
        <div>
            { params.id }
        </div>
    )
}

Use this:

 let { id } = useParams<{id: string}>();