React-router vs Next-router

URL에 따라서 그에 상응하는 화면을 전송해주는 것을 Routing이라고 한다.

React-router

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

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

사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다.

Next-router

const onClickLike = () => {
    likeBoard({
      variables: { boardId: String(router.query.boardId) },
      refetchQueries: [
        { query: FETCH_BOARD, variables: { boardId: router.query.boardId } },
      ],
    });
  };

Next.js같은 경우 자바스크립트 a 태그 형식과 같은 태그라 보면 된다.

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