React-router vs Nextjs-router

router

router란, url에 따라서 화면을 전송해 주는 것이다.
Link와 다르게 Router는 클릭이 되면 함수등이 실향이 될 수 있다.
그러면 이 router가 React에서와 React의 프레임워크인 Next.js에서 어떻게 다른 지 알아보자

React-router

import {BrowseRouter as Router, Switch, Route} from 'react-router-dom'

export default function App(){
<Router>
      <Switch> 
      	<Route exact path = "/taewoongmoon"/ >
      	<Route exact path = "/" />
        <Route exact path = "/iwanttogohome" />
      	<Route exact path = "" />
          
      </Switch>
</Router>

react-router에 경우 주소창의 주소와 path부분을 비교한다. 비교를 할 때는 맨 위에서 부터 비교를 하면서 path와 주소가 일치하는 곳으로 페이지를 이동을 시킨다.

Next.js-router

const result = await createBoard({
	varivales:{
    	write
      	title
      	contents
    }
})
const message = "게시글을 등록했습니다."
alert(message)

const url = result.data.createboard._id
router.push(`/board/detail/${url}`)

Next.js에서는 router.push를 통해서 필요한 것만 뽑아서 url에 넣어주어서 페이지를 이동시키고 있다.
React와 next.js를 비교해 보았을 때 동적으로 라우팅을 해주고 있기 때문에 더 효율적이라고 볼 수 있다.