React-router vs Next-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>

import { useRouter } from "next/router";

export default function DetailProduct () {

const router = useRouter()

const onClickMove = () => {
	router.push('원하는 페이지')
}

return (
	<div onClick={onClickMove}>이동</div>
)
}

router.push를 만들고 타입스크립트 혹은 자바스크립트 파일명을 그대로 써주면 그 페이지가 주소가 되는 재밌는 구조를 볼 수 있다.

라우팅면에서는 확실히 next.js가 편하긴 하다. 하지만, 많은 스타트업에서는 React.js를 쓰고있기때문에 설령 next.js를 공부하는 사람이라도 정확히 알아놓으면 좋을 정보이다.

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

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

출처 : https://velog.io/@moony_moon