Property 'match' does not exist on type '{ children?: ReactNode; }'

Question

I'm at a loss. I'm still new to typescript and I did try several proposed solutions that I found on other threads, such as importing RouteProps or RouteComponentProps and applying them to React.FC<RouteProps>, but match, params, and id still do not exist.

I tried to create some interfaces, but I'm not entirely sure how to type objects {}. Because match and params are objects, while id is string..

Below is the code I'm working with. Any input would be much appreciated.

const Cocktail: React.FC = (props) => {
  const { cocktail } = useSelector((state: StoreState) => state.cocktails);
  const dispatch = useDispatch();
  const { match: { params: { id }}} = props;

  useEffect(() => {
    dispatch(fetchCocktail(id));
  }, []);
  return (
    html elements...
  );
};

Answer 1

You may also add match to your props type

import { match } from 'react-router-dom';
interface DetailsProps {
  required: string;
  match?: match<DetailParams>;
}

DetailParams is an object representing url parameters, ex:

interface DetailParams {
  id: string;
}

more details here