[1] react-router-dom

react-router-dom을 이용한 방식은 nextjs에서 사용하는 것과 같이 페이지를 기준으로 이동되는 방식이 아니고 폴더의 경로를 지정해서 컴포넌트를 실행시켜주는 방식이다. 또한 동적 라우팅을 하기 위해서 /* 과 같이 경로를 잡아주어서 실행을 하게 된다.

import { BrowserRouter, Route, Routes, Link, useParams } from 'react-router-dom';

const a = useParams();
console.log(a);

return (
<BrowserRouter> 
  <Link to="/경로> 경로클릭 </Link>
  <Routes> 
    <Route path="/경로/:속성명" element={<컴포넌트/>} />
    <Route path="/경로1" element={<컴포넌트1/>} /> 
    <Route path="/" element={<컴포넌트1/>} /> 
    <Route path="/경로/*" element={<컴포넌트2/>} /> 
    <Routes>
    <Route path="경로" element={<컴포넌트2-1/>} /> 
  </Routes>
</BrowserRouter>
);

[2] next-router

react-router-dom을 이용한 방식은 nextjs에서 사용하는 것과 같이 페이지를 기준으로 이동되는 방식이 아니고 폴더의 경로를 지정해서 컴포넌트를 실행시켜주는 방식이다. 또한 동적 라우팅을 하기 위해서 /* 과 같이 경로를 잡아주어서 실행을 하게 된다.

pages라는 폴더를 기준으로 페이지를 이동할 컴포넌트를 넣어주고 push, back과 같이 페이지를 이동하는 방식이다. 직업 일일이 경로를 지정을 해줄 필요없이 page폴더에만 넣어주면 알아서 경로를 잡아준다. 또한 동적라우팅도 [폴더명]과 같이 만들어주면 간단하게 동적라우팅으로 변경이 되는 것도 장점이다.

2개다 사용을 해보았지만 nextjs가 처음에는 page 라우팅 방식이라서 약간 적응이 되지 않았는데 지금은 router-dom을 쓰게되면 적응을 못할것 같다.