< React > Router 정리

• Router 사용법
  • Router 로 url 경로를 설정할수있다.
    • 위에서 부터 거르고 걸려져 404 에러페이지로 보내버리는 형태로 자주 쓰임
    • version 5 기준으로 switch가 쓰임 → version 6 기준으로 routes가 대신 쓰임
    • exact path=”” 를 쓰면 정확한 경로로 설정
    • *주의점 ⇒ 코드가 위에서부터 읽히기 때문에 만약에 아래와 같은 코드에 exact를 붙이지 않으면 모든 페이지가 home으로 보내지는 현상이 발생함 따라서, 코드를 작성할때 exact를 붙이지 않는것을 고려할때는 걸러지는 순서를 예상하여서 코드를 위에서부터 써내려가야한다.

    function App() {
      return (
        <Router>
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route exact path="/movie">
              <Detail />
            </Route>
          </Switch>
        </Router>
      );
    }
    

  • 새창으로 넘어가지 않고 링크 이동시기는 방법
    • Link 이용하기

    import { Link } from "react-router-dom";
    
    <h1>
    <Link to="/movie">{movie}</Link>
    

• 동적 url 설정하기
  • 예를 들어 movie/id에서 id 요소 설정 가능
  • : id ⇒ 변형가능한 변수