npm i react-router-dom

• 라우팅 패키지 설치

SPA 특징

• 브라우저에서 루트 페이지를 요청하면 서버에서는 모든 컴포넌트를 포함한 하나의 페이지를 브라우저에게 보낸다.
• 사이트에 포함돼 있는 각각의 페이지는 하나의 컴포넌트로써 정의되어 있다.
• 따라서 특정 페이지를 불러올 때마다 서버를 거칠 필요 없이, 라우터의 도움을 받아서 페이지를 이리 저리 전환할 수 있다.

Route

import { BrowserRouter, Route } from 'react-router-dom'

<BrowserRouter>
	<Route path="/" **exact** component={Home} />
	<Route path="/profile" **exact** component={Profile} />
	<Route path="/profile/:id" component={ProfileId} />
	<Route path="/about" exact component={About} />
</BrowserRouter>

• Home, Profile, About 은 모두 컴포넌트이고, 각 컴포넌트는 특정 페이지와 연결된다.
• 한 주소에 하나의 컴포넌트에만 라우팅하기 위해 exact 속성을 설정한다.
• Route 컴포넌트는 Route와 연결돼 있는 컴포넌트에게 history 객체를 props 형태로 넘겨 준다. history 객체에서 주소의 파라미터를 뽑아낼 수 있다.

useParams

import { useParams } from 'react-router-dom'

// 상세 페이지
function ProfileId() {
	let params = **useParams**()
	let id = params.id
	return (...)
}

• 주소의 파라미터 값을 불러올 수 있다.
• ex) local~~/topics/1 에서 맨 뒤의 숫자 1을 파라미터라고 부른다.
• 주로 상세 페이지의 파라미터 값을 알아낼 때 사용한다.