How to fetch query string from the url in typescript?

Question

I got a route which may have different syntax according to the tokenid

<Switch>
        <Route exact path="/">
          <HomePageComponent />
        </Route>
        <Route path="/verify/:tokenId" component={EmailTarget}>
</Switch>

What i am trying to do is i am trying to grab what is in the place of :tokenId.

Here what code look like inside the Email Target Component.

const EmailTarget: React.FC = ( props ) => {
    const [ loginState, setLoginState ] = useState('');

    useEffect(() => {
              console.log(props.match.params.tokenId)
    }, [])

What I am doing now is simply console logging the tokenId. But the typescript is giving me error.

Here is the error log

C:/Users/kerry/Desktop/works/rslabs/src/components/EmailTarget.tsx
TypeScript error in C:/Users/kerry/Desktop/works/rslabs/src/components/EmailTarget.tsx(14,27):
Property 'match' does not exist on type '{ children?: ReactNode; }'.

The strange thing about this situation is that I can console.log the tokenId and actually giving me the result but the program is giving me an error.

Please don't give minus to this question. If you give a minus please mention the area I need to improve in the question first.

What is the output for console.log(props)? Also, did you check reactrouter.com/web/example/url-params ? I know their example doesn't use typescript, but it uses a useParams() hook instead. — mbkfa93
– mbkfa93, Commented Oct 13, 2020 at 14:27
Are you using the withRouter HoC on your component? That is withRouter(EmailTarget) ? If not Typescript won't recognize you are trying to use React Router props. — Diego Pedro
– Diego Pedro, Commented Oct 13, 2020 at 14:30
@DiegoPedro actually i am using it I am exporting withRouter(App) like this — Kerry
– Kerry, Commented Oct 13, 2020 at 14:35
@Kerry Then take a look at @merko answer as it is the correct one. Typescript cannot infer you are in a Route and therefore able to access RouteComponentProps — Diego Pedro
– Diego Pedro, Commented Oct 13, 2020 at 14:39

Merim · Accepted Answer · 2020-10-13 14:31:44Z

1

You need to extend component props with RouteComponentProps type, it includes everything you need.

Example:

const Component = ({
  history,
  match: {
    params: { id },
  },
}: YourProps & RouteComponentProps<{ id: string }>)

answered Oct 13, 2020 at 14:31

Merim

1,3572 gold badges24 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

How to fetch query string from the url in typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related