React-Router(△)

https://jineecode.tistory.com/154

react-router-dom 다루기

1. 설치 : npm install react-router-dom

2. App.js에 코드 작성

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

3. Route 컴포넌트:path를 이용해서 페이지 이동

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

4. useParams 컴포넌트: "/movie/:id" 라우트의 id를 전달

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

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