[코드캠프 벨류업]React-router vs Next-router

기본적으로 React의 Router 와 Next의 Router는 서로 많이 다르다.
Next.js 는 리액트 프레임워크이다. 리액트의 기능은 그대로 있으면서 추가로 기능이 더 추가된 프레임 워크이다. 리액트에서 하기 어려운 서버사이드렌더링,라우터 기능을 Next.js 에서는 좀더 편하게 개발 할 수 있도록 도와주기 때문이다.
React의 Router와 Next의 Router 의 차이는 무엇일까?

// React Link

import {Link} from "react-router-dom";

export default function App(){
	return <Link to = '/MinFront'></Link>
  
}


// Next.js Link
import Link from "next/Link";


export default function App(){
	return (
      <Link href = "/MinFront">
      	<a>about</a>
      </Link>

기본적으로 Next.js 는 자바스크립트에서 a 태그를 사용하여 페이지 이동하는 것과 다를것이 없다.많이 비슷하다.
하지만 라우터는 조금 다르다.
Next.js 는 useRouter를 임포트 함과 동시에 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 = "/MinFront"/ >
      	<Route exact path = "/" /> // 이렇게 / 하나만 쓰면 index.js 메인페이지를 불러온다.
        <Route exact path = "/gogo" />
      	<Route exact path = "" />
          
      </Switch>
</Router>

위의 코드는 리액트의 라우터 방식이다. 기본적으로 react-router-dom을 설치한 후 Router,Switch,Route등 여러가지를 임포트 해서 사용 해야 한다.
여러가지 조건에 만족해야 CSR 처럼 자연스러운 페이지 라우팅이 가능하다.
Next.js 에서는..

import { useRouter } from "next/router";

export default function movePage(){
  const router = useRouter();
  const onClickMove=()=>{
    router.push("/이동할 폴더 위치")
  }
  return <p onClick={onClickMove}>페이지 이동</p>
}

컴포넌트의 제일 최상단에 useRouter를 선언한 후 router.push()를 통해 편하게 페이지 이동을 할 수 있다!