function app{
<Route path='/'>
<div>메인페이지에요</div>
</Route>
<Route path='/detail'>
<div>디테일페이지에요</div>
</Route>
}
react router의 경우 이런식으로 작성하게 되고
url에
주소/ ===> 메인페이지에요
주소/detail ===> 메인페이지에요, 디테일페이지에요
라고 화면에 나타남
방지하려면 Route exact path를 입력해 줘야함
위의 react router 방식은 매우 비효율적이기 때문에 next router를 쓰면 매우 편리하다
boards라는 폴더를 만들고(굳이 boards라고 안해도 됨) 하위에 []폴더를 생성(변수역할을 하게 됨)
useRouter 훅을 import 해주고
const router = useRouter()로 선언해줌
router.push(`/boards/${e.target.id}`)
${}안에는 value값 보통 id를 입력하게 됨
예를들어 id가 1이면
router.push가 작동하면 /boards/1로 이동하게 됨
그래서 []폴더에 잘 만들어 두면 두고두고 쓸 수 있음
react router의 경우도 next router처럼 사용할 수 있다.
하지만 parameter를 입력해야 하고 useParams를 선언하고 값을 불러오고 그 값을 find()의 메서드를 이용해서 찾는 과정이 매우 복잡하기 때문에 next router가 좀더 편리하다고 볼 수 있음.
function ~(props){
let 변수명 = props.~~~.find(function(파라미터명){
return 파라미터.고유값명(id명 등) == 비교값
});
위와 같이 react router는 사용됨