본문 바로가기

LINK

(3)
Next.js next/Link in React import { Link } from "react-router-dom"; 회원가입 in Next import Link from "next/link"; 회원가입
Next.js Link Error 해결 - Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Next Link Error Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? - Next/Link의 children으로 component를 줬을때 생기는 error 입니다. 1. component를 a tag로 감싸줍니다. 2. a태그를 styledComponents로 감싸주면 a tag의 lint error가 사라집니다. https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component next/link | Next.js Enable..
window.location.href vs useNavigate vs Link window.location.href vs useNavigate useNavigate history모듈에 의존성을 가지고 있고, 이걸로 라우팅을 지원한다. HTTP요청을 새로 하지 않고 안의 내용만 바꾼다. * 뒤로가기버튼을 클릭해도 페이지가 unload되지 않고 내용만 바뀐다. location.href 페이지를 전환하면 HTTP요청을 새로 한다. * 뒤로가기를 클릭하면 페이지가 unload되고 새로운 페이지를 불러온다. Link vs useNavigate useNavigate navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있습니다. 함수 호출을 통해 이동하기 때문에, 이동할 때 조건을 걸 수 있습니다. ex) 로그인이 되어있는 사용자가 My 버튼을 눌렀을 때 -> My p..