# React Router

📌 React Router

: 페이지 전환을 위해 쓴다.

설치

npm install react-router-dom

Router 종류

1. Browser Router

: 보통의 웹사이트처럼 생겼음.
Hash Router보다 자주 사용함.

2. Hash Router

: 뒤에 # 등을 붙임.

형태

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

<Router>
  <Switch>
    <Route path="/detail">
      <Detail/>
    </Route>
    <Route path="/">
      <Home />
    </Route>
  </Switch>
</Router>  

• path로 주소 경로 설정할 수 있음.
• / 는 현재 페이지를 나타냄.
• / 뒤에 마음대로 경로 이름을 설정하면 된다.
  ex) /movie, /detail

⭐️ Link

: 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트
(html의 a태그와 비슷한 역할)

import { Link } from "react-router-dom";

<Link to="/detail">{title}</Link>

⭐️ 동적 url

: 사용자가 선택한 요소에 따라 동적으로 상세페이지를 보여주기 위해 사용.

사용법

경로 뒤에 :변수 적어주기
ex) path="/detail/:selectid"

• 선택한 요소의 id를 경로에 표시할 수 있음.
  
  

url에 있는 selectid 값을 읽어오기 위해서는 useParams를 이용한다.

⭐️ useParams : url에 있는 값(변수)을 반환해주는 함수

import { useParams } from "react-router-dom";

예제

App.js

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

<Router>
  <Switch>
    <Route path="/detail/:selectID">
      <Detail/>
    </Route>
    <Route path="/">
      <Home />
    </Route>
  </Switch>
</Router>  

movie.js

import { Link } from "react-router-dom";
import PropTypes from "prop-types";

function Movie({ id, coverImg, rating, title, year, summary, genres }) {
  return (
    <div>
      <div key={id}>
        <Link to={`/detail/${id}`}>{title}</Link>
        장르 :
        <ul>
          {genres.map((g) => (
            <li key={g}>{g}</li>
          ))}
        </ul>
        <h3>{year}</h3>
        <h3>평점 : {rating}</h3>
        <img src={coverImg}></img>
        <p>{summary}</p>
      </div>
    </div>
  );
}

Movie.propTypes = {
  id: PropTypes.number.isRequired,
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
  rating: PropTypes.string.isRequired,
};

export default Movie;

detail.js

import React from "react";
import { useParams } from "react-router-dom";
import { useEffect } from "react";

function Detail() {
  const { selectID } = useParams();
  const getMoive = async () => {
    const json = await await (
      await fetch(
        `https://yts.mx/api/v2/movie_details.json?movie_id=${selectID}`
      )
    ).json();
    console.log(json);
  };
  useEffect(() => {
    getMoive();
  }, []);
  return <h1>detail</h1>;
}

export default Detail;