Browser React Router를 사용해보자

1. 설치

npm i react-router-dom

2. Route와 path, 그리고 Link to를 이용해보자

 <Route path="/movie/:id" element={<Detail />} />
 <Link to={`/movie/${movie.id}`}>{movie.title}</Link>

3. useParams를 이용해보자

리액트 라우터를 사용 할 때, 파라미터의 정보를 가져다가 쓰고 싶다면, useParams라는 훅을 사용하면 된다.
useParams 우선 객체 구조분해로, const { id } = useParams()로 설정을 한 뒤,
${id}를 이용해서 사용하면 된다.

4.코드

Detail.js
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
const Detail = () => {
  const [loading, setLoading] = useState(true);
  const [movie, setMovie] = useState([]);
  const { id } = useParams();

  const getMovie = async () => {
    const json = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();
    console.log(json.data.movie);
    setMovie(json.data.movie);
    setLoading(false);
  };
  useEffect(() => {
    getMovie();
  }, []);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          <h1>{movie.title}</h1>
          <img src={movie.medium_cover_image} />
        </div>
      )}
    </div>
  );
};

export default Detail;

App.js
import React from "react";
import { BrowserRouter, Route, Router, Routes } from "react-router-dom";
import Detail from "./routes/Detail";
import Home from "./routes/Home";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/movie/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;