React-router-dom 의 작동방법

Router 에는 두가지 종류가 있다.

• Browser 라우터
• Hash 라우터

이둘의 차이점은 url의 생김새에 있는데,Browser Router의 URL은 보통의 웹사이트와 같이 생겼다.
Hash Router의 경우에는 ex)localhost:3000/#/movie 처럼 url 뒤에 #표시가 붙는다.

react-router-dom은 component들의 모음집이다.

react-router-dom의 component들이 하는 일은

이곳에 보여지는 url들을 쳐다보고 있는 것이다. 저곳의 url이 바뀌면 어떤 것을 보여줄지 결정한다.

<react-router-dom 6버전으로 작성하였다.>

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

먼저 다음과 같은 코드를 삽입한다.

function Movie() {
    return (
        <Router> {/*router를 만든다 */}
            <Routes> 
            <Route path="/movie" element={<Detail/>}/>
          </Routes>
          <Routes> {/*switch 가 react-router-dom이 버전 6으로 업그레이드 되며 routes로 바뀜 */}
            <Route path="/" element={<Home/>}/>{/*router 안에 route를 만들어서 user가 "/"url에 있는 경우 home route를 렌더링 해준다*/}
          </Routes>
        </Router>
      );
}

먼저 로 router를 먼저 렌더링 해준다. 안에는 우리가 유저에게 보여주고 싶은 것들을 넣어준다. user가 위치하고 있는 url에 따라 움직인다.
component는 하나의 Route만 렌더링 하기 위해서 사용한다. <Route path="/" element={}/>
을 통해 path가 /인 곳에서는 Home component를 보여준다.

Link는 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트이다.