How to use Typescript with React Router and match

Question

The approach

I'm trying to get my head around Typescript and React Router. I've been struggling...

I currently get the error :

Property 'params' does not exist on type 'RouteComponentProps<{}, StaticContext, any>'.ts(2339)"`

import React from "react";
import { RouteComponentProps } from "react-router-dom";

const TopicDetail = ({ match }: { match: RouteComponentProps }) => {
  return (
    <div>
      <h3>{match.params.topicId}</h3>
                 ~~~~~~
    </div>
  );
};

export default TopicDetail;

Look ma, no errors!

I can get rid of the errors by defining my own interface, but I somehow feel it's the wrong way to do it:

import React from "react";

interface Props {
  params: any;
}
const TopicDetail = ({ match }: { match: Props }) => {
  return (
    <div>
      <h3>{match.params.topicId}</h3>
    </div>
  );
};

export default TopicDetail;

Henry · Accepted Answer · 2019-08-26 00:03:51Z

10

Defining an interface for the router params props is the recommended way to go, although you can be a bit more explicit with your interface declaration. When you declare the interface for the props for your component, you can extend the RouteComponentProps and use your specific params interface as the type variable.

For example:

import React from "react";
import { withRouter, RouteComponentProps } from "react-router-dom";

interface RouterProps { // type for `match.params`
    topicId: string; // must be type `string` since value comes from the URL
}

interface TopicDetailProps extends RouteComponentProps<RouterProps> {
    // any other props (leave empty if none)
}

const TopicDetail: React.FC<TopicDetailProps> = ({ match }) => {
    return (
        <div>
            <h3>{ match.params.topicId }</h3>
        </div>
    )
}

export default withRouter(TopicDetail);

edited Aug 26, 2019 at 0:03

answered Aug 25, 2019 at 21:51

Henry

15.9k7 gold badges51 silver badges69 bronze badges

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

2 Comments

skube Over a year ago

Ah I guess I was trying to do it in one step. Also, not realizing I needed withRouter HOC. Finally, I had to change the topicId to type string to make it work (not exactly sure why).

Henry Over a year ago

@skube oh yeah the string thing, forgot about that... I believe that's because the values come from the url, so they're all strings to start out.

Collectives™ on Stack Overflow

How to use Typescript with React Router and match

The approach

Look ma, no errors!

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The approach

Look ma, no errors!

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related