HOC로 해결하면된다.
예를들면
import { ComponentType } from 'react'
import { useIntl } from 'react-intl'
import { useParams, useLocation, useNavigate } from 'react-router-dom'
interface WrappedProps {
// 전달받는 컴포넌트의 props
}
const withSetTimeout = <P extends WrappedProps>(
WrappedComponent: ComponentType<P>,
) => {
const Component = (props: P) => {
console.log('HOC props: ', props)
const params = useParams()
const location = useLocation()
const navigate = useNavigate()
const intl = useIntl()
const combineProps = {
...props,
params,
location,
navigate,
intl,
}
return <WrappedComponent {...combineProps} />
}
return Component
}
export default withSetTimeout