[React Study]React Router Dom 모듈 공부

오늘 갑작스럽게 React Router Dom에 대해서 공부할 일이 생겨서 메모겸! 나중에 찾아볼겸!! 남겨봅니다.

은근히 이렇게 남겨놨다는 사실을 기억하면, 예전 소스 말고 스팀에서 코드를 찾아보게 되더군요!!! 이런 면에서는 나름 굳굳!!

---

react-router-dom 은 react의 route 기능을 담당합니다.

// HashRouter은 context root 뒤에 #이 나타나고
// BrowserRouter은 기능적으로는 동일하나 #이 나타나지 않습니다.
import { HashRouter, Route } from "react-router-dom";

구현

// HashRouter 안에 Route들을 선언해야만 합니다.
// Route가 Router 밖에 있는 경우 작동하지 않습니다.

function App() {
  return (
    <HashRouter>
      <Navigation />
      <Route path="/" exact={true} component={Home} />
      <Route path="/data/:id" component={Detail} />
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

Link 기능(react-router-dom)

• Route 간 state 값을 전달 해줄 수 있는 기능을 포함하고 있습니다.
• 일반적인 html의 경우 태그와 비슷한 기능을 하지만, 그렇게 이용하면 Single Page 기반인 react가 새로고침 되기 때문에 Link를 사용해야합니다.

// to prop를 사용 하면 됩니다.
// pathname : path
// state 를 이용하여 값 전달 가능
import { Link } from "react-router-dom";

<Link
      to={{
        pathname: `/movie/${id}`,
        state: { year, title, summary, poster, genres },
      }}
    >