[👾 ErrorLog] styled component에 연결된 HTML 태그에 따른 에러

어떤 에러인가?
* Navbar, Sidebar에 각각 styled component로 ``, `` 컴포넌트를 만들고 onClick으로 모달 상태 변경 함수를 연결해줬는데 `TypeError: Cannot read properties of undefined (reading 'pathname')` 라는 에러 메세지가 계속 떴다.
```js
로그인

export const NavSignInBtn = styled(LinkR)`
border-radius: 20px;
background: #fff;
color: #000;
white-space: nowrap;
padding: 10px 15px;
font-size: 16px;
outline: none;
border: none;
cursor: pointer;
text-decoration: none;
`;

로그인

export const SidebarBtn = styled(LinkR)`
border-radius: 40px;
background: #fff;
white-space: nowrap;
padding: 24px 50px;
color: #000;
font-size: 25px;
outline: none;
border: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
text-decoration: none;
`;
```

에러 메시지
```js
TypeError: Cannot read properties of undefined (reading 'pathname')

resolveTo
/Users/yunjinkim/packages/react-router/index.tsx:1226
1223 | locationPathname: string
1224 | ): Path {
1225 | let to = typeof toArg === "string" ? parsePath(toArg) : toArg;
> 1226 | let toPathname = toArg === "" || to.pathname === "" ? "/" : to.pathname;
1227 |
1228 | // If a pathname is explicitly provided in `to`, it should be relative to the
1229 | // route context. This is explained in `Note on `` values` in our

(anonymous function)
/Users/yunjinkim/packages/react-router/index.tsx:550
547 | matches.map(match => match.pathnameBase)
548 | );
549 |
> 550 | return React.useMemo(
| ^ 551 | () => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname),
552 | [to, routePathnamesJson, locationPathname]
553 | );

▼ 3 stack frames were expanded.

useResolvedPath
/Users/yunjinkim/packages/react-router/index.tsx:550
547 | matches.map(match => match.pathnameBase)
548 | );
549 |
> 550 | return React.useMemo(
| ^ 551 | () => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname),
552 | [to, routePathnamesJson, locationPathname]
553 | );

useHref
/Users/yunjinkim/packages/react-router/index.tsx:362
359 | );
360 |
361 | let { basename, navigator } = React.useContext(NavigationContext);
> 362 | let { hash, pathname, search } = useResolvedPath(to);
| ^ 363 |
364 | let joinedPathname = pathname;
365 | if (basename !== "/") {

LinkWithRef
/Users/yunjinkim/packages/react-router-dom/index.tsx:217
214 | { onClick, reloadDocument, replace = false, state, target, to, ...rest },
215 | ref
216 | ) {
> 217 | let href = useHref(to);
| ^ 218 | let internalOnClick = useLinkClickHandler(to, { replace, state, target });
219 | function handleClick(
220 | event: React.MouseEvent

View source
▶ 22 stack frames were collapsed.
```

에러 해결 방법
* 에러 메세지가 복잡하고 어느 지점에서 문제가 있는건지 알 수가 없었는데 Navbar.js 에서 컴포넌트 단위로 주석처리를 하며 어디서부터 렌더링이 안되고 에러가 나는지 봤던게 가장 큰 도움이 되었다.
* 다른 부분은 주석처리 했다가 해제해도 문제가 없었는데 버튼 컴포넌트 쪽에서 위와 같은 에러가 뜨는 것을 확인했다. 버튼 컴포넌트에 링크를 걸어놓은 것이 문제였다.
* LinkR을 지우고 button 태그로 변경해주었더니 에러가 사라졌다.
* react-router-dom의 Link를 사용할거라면 컴포넌트에 to='/signin' 이런식으로 속성을 줘야한다.

```js
export const NavSignInBtn = styled.button
export const SidebarBtn = styled.button
```