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
⚠️ **GitHub.com Fallback** ⚠️