CODEWITHSUNDEEP
reactjsreact-router-dom
Raven
Raven

Reputation: 699

React Router useParams returns undefined

I'm trying to just print the topicId which is extracted from the URL. But whenever I attempt to do this, it is returned as undefined. What am I doing wrong in this code?

import React, {useState, useEffect, useRef, useLayoutEffect} from 'react';
import { Route, Switch, useRouteMatch, useParams} from 'react-router-dom';

function Review():JSX.Element {
  const match = useRouteMatch()

  function Topic(){
    let {topicId} = useParams<{topicId:any}>()
    console.log(topicId)
    return <>The topic is... {topicId}</>
  }
  return(
    <Switch>
      <Route path={`${match.path}/:topicId`}>
        {Topic()}
      </Route>
    </Switch>
  )
}

export default Review;

Upvotes: 0

Views: 631

Answers (1)

Sanket Shah
Sanket Shah

Reputation: 3091

You need to add Topic as a component not as a function inside Route:

 <Route path={`${match.path}/:topicId`}>
        <Topic/> // <--- Change here
  </Route>

Please have a look at this documentation: https://reactrouter.com/web/api/Hooks/useparams

Upvotes: 1

Related Questions