React-router

는 경로 및 컴포넌트 설정에 있어 Next-router보다 조금 더 복잡한 방식으로 이루어져 있다.

아래는 React 사용되는 방식이다

import {BrowserRouter as Router, Routes, Route} from "react-router-dom"

export default function App() {
    <Router>
        <Routes> 
            <Route exact path = "/kingmo"/>
            <Route exact path = "/" /> // index.js
            <Route exact path = "/kingmo" />
            <Route exact path = "" />
        </Routes>
    </Router>
}

React Router는 Routes안에 있는 여러가지 Router중에서 조건에 만족한 첫번째 Router를 불러온다.

아래는 Next에서 사용되는 방식이다.

const async = () => {
    const result = await createBoard({
      variables: {
        headWriter: boardWritePackage.headWriter,
        headPassword: boardWritePackage.headPassword,
        headTitle: boardWritePackage.headTitle,
        headContent: boardWritePackage.headContent
      }
    })
    const message = "입력이 완료되었습니다."
    alert(message);
    const id_val = result.data.createBoard._id
    router.push(`/board/detailwrite/${id_val}`)
}

Next에서 사용하는 방식은 router.push를 만들고 파일명을 그대로 써주면 그 페이지가 주소가 되는 직관적인 구조를 가지고 있는 것을 볼 수 있다.

또한 React의 경우 중첩라우팅 구조를 구성하기가 번거롭지만
Nest는 대괄호로 이루어진 폴더에 [폴더명] 동적 라우팅을 해주고,
그 주소로 router.push만 하면 중첩 라우팅 구조가 완성되어 훨씬 편하고 효율적이다.

참조

https://intrepidgeeks.com/