react. react-router-dom

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

import Detail from "./routes/Detail";
import Home from "./routes/Home";

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

export default App;

import { ... } from "react-router-dom"; 을 해줌으로써 지정한 url로 이동하면 원하는 컴포넌트들을 화면에 띄울 수 있다.

<h2><a href="/movie">{title} ({year})</a></h2>

Movie 컴포넌트로 가서 title부분에 a태그로 링크를 걸어주면 간단하게 이동!

여기서 새로고침 없이도 다른페이지로 이동하려면 import { Link } from "react-router-dom";  Link 컴포넌트를 임포트한다.

<h2><Link to ="/movie">{title} ({year})</Link></h2>

<a> 태그 대신 <Link>태그의 to속성 사용.

---

url을 지정할 때, 영화의 movie.id 데이터를 받아와서 각각의 상세화면을 보여줄 수 있다. 
: 변수명 을 추가해 Route에 해당 path의 url이 이 변수를 받을거라고 말해주는 것.

 <Route path="/movie/:id" element={<Detail />}></Route>

이렇게 지정하게되면 /Home 에서 /movie로 연결해주는 과정이 있는 컴포넌트에 id값을 넘겨줘야하니~

• Home.js 컴포넌트의 return
    
    <Movie 
      key={movie.id}
      + id={movie.id}  
      coverImg={movie.medium_cover_image} 
      title={movie.title}
      year={movie.year}
      summary={movie.summary} 
      genres={movie.genres}
    />
   
• Movie.js 컴포넌트의 return
    
    function Movie({  id , coverImg, title, year, summary, genres}){
    return (
      <div>
        <img src={coverImg} alt={title} />
        <h2><Link to ={`/movie/${id}`}>{title} ({year})</Link></h2>
        <p>{summary}</p>
        <ul>
          {genres.map(
            g => <li key={g}>{g}</li>
          )}
        </ul>
      </div>
    );
  }
  + Movie.PropTypes에도 id 데이터 형식 추가

이제 요청한 url에 들어오는 매번 다른 id값을 어떻게 받아오냐!? 바로 useParams 컴포넌트를 통해 쉽게 얻을 수 있다.
이것 또한 react-router-dom에서 제공하는데, 그냥 변수에 선언하고 콘솔찍으면 나온다.

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

function Detail(){
  const x = useParams();
  console.log(x);
  return <h1>Detail</h1>;
}

export default Detail;

//console창 확인해보면 {id: 15163}  < /movie/:id 의 id가 key값이 됨.
//const {id} = useParams(); 로 변경하면 이제 값만 보인당.