React-router vs Next-router

Router

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

React-router

React-router

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

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

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

Next-router

Next-js 같은 경우는 자바스크립트 a 태그 형식과 거의 같다고 보면 될 것 같다.

// React Link

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

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


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


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

Link가 아닌 router의 경우에는

Next.js-router
const result = await createBoard({
	varivales:{
    	write
      	title
      	contents
    }
})

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

위와 같은 방법으로 router.push를 통해 간단하게 진행이 가능하다.

Next.js같은 경우는 원하는 a 태그에 링크를 걸어서 href형식으로 주면된다.