Invalid value for prop 'component' on <a> tag

Question

I'm getting an error saying an invalid value for prop 'component' on tag.

Below is the code I have in my component.

<Link to="/posts" component={Posts}>
    See Posts
</Link>

What does this error mean?

Answer 1

To answer your other question:

I understand what i was doing wrong.. however, just wondering why would this throw a warning saying that its an invalid prop? what prompts it to throw that warning. If i have a custom component and I pass some random prop to it, it doesn't result in a warning .. why does it happen here though?

It's because the Link component passes all props it doesn't use to the <a> tag. React sees that you're assigning a component prop on the <a> and that it's an invalid prop for that element, so it throws a warning.

You can see this in the React Router source - it's a simple component.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js

To be clear, this has nothing to do with the PropTypes. As far as I know there's no option with PropTypes to throw an error when passed an unspecified prop.