React-router vs Next-router

Next.js React 에서 router에서 유일하게 크게 차이를 보인다. 라우팅을 할 때 next에서는 상대적으로 쉽게하는 반면, react 상대적으로 경로 및 컴포넌트 설정에 있어서 복잡하다.

React-router

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

export default function App(){
<Router> //일단 라우팅 되는 부분을 감싸준다
      <Switch> //Switch는 안에있는 여러가지 Router중에서 조건에 만족하는 첫번째 Router를 불러온다.
      	<Route exact path = "/taewoongmoon"/ >
      	<Route exact path = "/" /> // 이렇게 / 하나만 쓰면 index.js 메인페이지를 불러온다.
        <Route exact path = "/iwanttogohome" />
      	<Route exact path = "" />
          
      </Switch>
</Router>
          

Next-router

try{

const result = await createBoard({
	variable:{
    	writer
        title
        contents
    }
})
alert("등록되었습니다")
const id = result.data.createBoard.id
router.push(`/board/detail/${id}`)

}catch(error){
	alert(error.message)
}

router.push를 만들고 타입스크립트 혹은 자바스크립트 파일명을 써주고 그페이지가 주소가 되는 구조
라우팅 면에서는 next.js가 편함.

또한, React같은 경우는 Nested Routes를 설정할때 을 이용하여 {match.path}:slug 직접 설정해줘야하는데

Next.js에서는 파일명 []대괄호하고 동적 라우팅을 해주고 그 주소로 route.push를 하면 nested routes가 완성.