React 5 - router

Router

사용자가 입력한 주소를 감지하는 역할을 한다.
(페이지를 전환하는 것)

https://reactrouter.com/en/main/start/tutorial
npm install react-router-dom

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

스크린 단위로 생각해야 한다.
route 1 -> home
route 2 -> movie
...

처럼 route를 만들어 놓고 App.js에서 render 하는 것이다.

router는 url에 따라 컴포넌트를 보여주는 것

switch는 react-router-dom이 v6로 업데이트 되면서 지원을 안하게 되었다. Switch가 모두 Routes로 바뀌었다고 한다. 링크

BrowserRouter와 HashRouter의 차이는 url의 생김새다.
BrowserRouter는 HTML5를 지원하는 브라우저의 주소를 감지한다.
HashRouter는 해시 주소를 감지한다.
(ex: http://~~.com/#test)

Dynamic url

React router는 dynamic url(동적url)을 지원한다.
(url에 변수를 넣을 수 있음)

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

switch를 더이상 지원하지 않으므로 다음과 같이 고칠 수 있다.

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

Link

React에서는 다른 페이지로 이동하려면, a태그를 쓰는대신에 다른걸 써야한다. (화면 전체가 재실행되기 때문에 a태그를 사용하면 안된다.)
대신, React-router-dom에서 제공하는 Link를 사용하면 된다. Link는 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트이다.

<Link to={`/movie/${id}`}>{title}</Link>

위 처럼 Route에 :id로 변수를 줄 수 있다.
이 변수는 useParams()함수로 받아서 사용할 수 있다.

function Detail() {
  const { id } = useParams();
  ...
}