Warning: Unknown props

 index.js:1 Warning: React does not recognize the `staticContext` prop on a
 DOM element. If you intentionally want it to appear in the DOM as a custom
 attribute, spell it as lowercase `staticcontext` instead. If you accidentally
 passed it from a parent component, remove it from the DOM element.
    in a (created by LinkAnchor)
    in LinkAnchor (created by Context.Consumer)
    in StrictMode (at src/index.js:50)

react-router-dom의 WithRouter와 NavLink를 HOC 처럼 활용했을 때, staticContext가 undefined로 할당되고 에러가 발생한다.

Warning을 보자면, WithRouter는 staticContext를 생성하는데, React에서 staticContext는 알 수 없는 props이고 DOM attribute도 아니기 때문에 커스텀 attribute로 넣고 싶으면 소문자로 써라!! 아니면 지우라고 나와있다.

해결 방법은 매우 간단했는데,

const newNavLink = withRouter(({staticContext, ...rest}) => {
	return <NavLink {...props}/>
})

withRouter(NavLink) 로 바로 넘겨주지 말고, 위 처럼 구조화 할당을 통해 staticContext를 따로 분리 해낸 뒤, 나머지만 NavLink에 넘겨주었다. 해결방법은 금방 찾았지만, 오래 걸렸던 이유는 NavLink가 컴포넌트임을 망각하고 함수처럼 집어넣다가 시간을 오래 소모해버렸다.. 조만간 react-router-dom에 관한 정리를 해봐야겠다.

참고 자료1: https://github.com/ReactTraining/react-router/issues/4683#issuecomment-285707741

참고 자료2: https://ko.reactjs.org/warnings/unknown-prop.html