withRouter 사용시 location, match undefined 문제

프로젝트를 진행하는 중에 withRouter를 사용해야 하는 일이 생겼다. 그래서 아래와 같이 컴포넌트를 만들었다.

import { BrowserRouter, Link, Route, RouteComponentProps, Switch, useHistory, withRouter } from "react-router-dom";
...

const NavBar: FC<navBarProps & RouteComponentProps> = (props, {match, location}): JSX.Element => {
...
  console.log("test: ", match, location);
  /* 이렇게 했을 때 콘솔창에는 undefined가 나온다. */
  return (
    <nav className="menu">
      <BrowserRouter>
      ...
      </BrowserRouter>
    </nav>
  );
};

export default withRouter(NavBar);

위와 같이 코드를 짰을 때 console.log() 부분에서 undefined가 나온다. 이유를 찾아보니까 아주 단순한 사실이었다. match, location, history 는 withRouter 를 사용할 때 props로 담겨서 넘어오는 props이다.

그렇기 때문에 위 코드와 같이 props를 인자로 받아오는 부분에 (props, {match, location}) 이런 식으로 해서 undefined가 나오는 것이었다.

그래서 그냥 인자를 받아올 때 단순히 props만 놔두고 props.location 과 같이 접근하면 원하는 값을 얻을 수 있다.

import { BrowserRouter, Link, Route, RouteComponentProps, Switch, useHistory, withRouter } from "react-router-dom";
...

const NavBar: FC<navBarProps & RouteComponentProps> = (props): JSX.Element => {
...
  console.log("test: ", props.match, props.location);
  /* 이제는 원하는 결과가 나온다 */
  return (
    <nav className="menu">
      <BrowserRouter>
      ...
      </BrowserRouter>
    </nav>
  );
};

export default withRouter(NavBar);