[Router] Next.js의 router와 React의 router

Next.js는 React를 감싸고 있는 프레임워크이다.
React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 있다.
라우팅을 할 때는 Next.js에 비해 React는 상대적으로 경로 및 컴포넌트 설정에 있어서 좀 더 복잡하다.

Next.js의 router

router.push(`/boards/${e.target.id}`)

Next.js는 router.push() 안에 폴더명을 그대로 써주면 된다.
동적 라우팅을 할 경우 폴더명을 [대괄호 폴더명]으로 만들면 폴더명이 존재하지 않는 값을 넣었을 때 자동으로 [대괄호 폴더명]으로 들어간다.

React의 router

const App = () => { 
  return ( 
    <div className='App'> 
    	<BrowserRouter> 
    		<Header /> 
    		<Routes> 
    			<Route path="/" element={<Main />}></Route>
				<Route path="/product/*" element={<Product />}></Route>
				<Route path="*" element={<NotFound />}></Route>
			</Routes> 
		</BrowserRouter>
	</div> ); };

1. <BrowserRouter> 태그로 컴포넌트를 감싸준다.
   React의 router를 사용할 때는, react-router-dom에 내장되어 있는 BrowserRouter 컴포넌트를 사용하여 감싸줘야 한다.
2. <Routes> 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜준다.
3. <Route>는 path 속성에 경로, element 속성에 컴포넌트를 넣어준다.
   (여러 라우팅을 매칭하고 싶은 경우 url 뒤에 *)
4. <Link> 태그를 사용한다. (import from react-router-dom)
   <Link to="경로">링크명</Link>