In my child component I am defining the Props interface and include it in the React.Component.
These Props are then required to be passed to the child component from the parent component. So far so good, this all makes sense..
However when I extend the Props interface with i.e. RouteComponentProps from react-router Typescript also requires me to pass 'history, location, match', which I don't think I am supposed to pass manually...
I don't think it is related specifically to RouteComponentProps, as in certain cases I run into the same error with MapDispatchToProps and the PropsFromDispatch interface - a more elaborate explanation of this case here
Here is my code:
/Child.tsx
import * as React from 'react'
import { RouteComponentProps } from 'react-router';
interface Props extends RouteComponentProps { }
class Child extends React.Component<Props> {
render() {
return (
<div>
</div>
)
}
}
export default Child;
/Parent.tsx
import * as React from 'react'
import Child from './Child';
export default class Parent extends React.Component {
render() {
return (
<div>
<Child />
</div>
)
}
}
Error in /Parent.tsx:
<Child/>
Type '{}' is missing the following properties from type
'Readonly<Props>': history, location, match - ts(2739)
Typescript and React versions:
"typescript": "^3.2.1", "react": "^16.6.3", "@types/react": "^16.7.13"
Thanks for any advice!
So the problem is being caused by the Props
which are marked as required in the RouteComponentProps
class.
As you workaround you need to export your class as any
, it will export your class without any type.
import * as React from 'react'
import { RouteComponentProps, withRouter } from 'react-router';
interface Props extends RouteComponentProps { }
class ChildImpl extends React.Component<Props> {
render() {
return (
<div>
</div>
)
}
}
const Child = withRouter(ChildImpl as any);//Note: It is a workaround not an actual solution
export default Child;
And then in your parent:
import * as React from 'react'
import Child from './Child';
export default class Parent extends React.Component {
render() {
return (
<div>
<Child />
</div>
)
}
}
No Props will be required to pass.
I had the same issue, and the idea from @goediaz works fine to me, the only diference was I'm working with funcional components.
const MyFunciont: React.FC<IGlobalState> = (_RouteComponentProps, props) = {
//here your code
return (
//html code
)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With