Router URL Parameters - wookikiik/react_study GitHub Wiki
[...]
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useParams
} from "react-router-dom";
[...]
<Link to="/netflix">Netflix</Link>
[...]
<Switch>
<Route path="/sample/b">
<SampleB />
</Route>
<Route path="/sample/:id" children={<Child />} />
</Switch>
function Child() {
// `useParams` hook을 통해서 동적 파라미터 값을 알 수 있다.
let { id } = useParams();
return (
<div>
<h3>ID: {id}</h3>
</div>
);
}
<Route>
의 prop children
으로 컴포넌트를 선언하거나,
<Route>{JSX.Element}</Route>
으로 컴포넌트를 로드할 수 있다.
<Switch>
안에 <Route>
path 설정 시 순서 중요
동일한 패스에 파라미터라면 static 파라미터를 dynamic 파라미터 사용 앞에 선언 해야 함
예)
1. /sample/a
2. /sample/:id