react-router-dom 은 컴포넌트의 모음집이다.
App.js에 컴포넌트를 지정해줄때 Router을 이용해서 경로도 지정해줄 수 있다.
나의 경우 terminal에 'npm i react-router-dom@5.3.0' 를 명령해주었다.
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Detail from "./routes/Detail"
import Home from "./routes/Home";
function App() {
return (
<Router>
<Switch>
<Route path="/movie">
<Detail/>
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
export default App;
BrowserRouter, Switch, Route 를 이용해서
'localhost:3000/' 에는 메인화면인 Home.js 를
'localhost:3000/movie' 에는 영화의 상세정보를 볼 수 있는 Detail.js를 지정해주었다.
중간에 Switch를 사용한 이유는 한 번에 하나의 Route만 렌더링하기 위해서다.
Router는 여러개의 Route를 렌더링할 수 있기 때문이다.
현재 라우터를 배우고 있는 시점에서 라우터가 버전6까지 출시되었다..
6에서는 더이상 Switch를 사용하지 않는다길래 다시 코드를 변경해보았다.
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/>}/>
</Routes>
</Router>
);
}
export default App;
Switch의 네이밍이 Routes로 바뀌게 되었다.
따라서 Switch대신 Router과 Route 사이에 Routers를 추가로 작성해줘야한다.
기존 html에서는 'a href="/"'를 이용해서 경로를 이동할 수 있었지만
한가지 단점이 있다면 웹페이지 전체를 새로고침 한다는 것이다.
Link는 브라우저의 새로고침 없이도 다른 페이지로 이동시켜주는 컴포넌트이다.
import PropTypes from "prop-types";
import {Link} from "react-router-dom";
function Movie({ coverImg, title, summary, genres }) {
return (
<div>
<img src={coverImg} alt={title}/>
<h2>
<Link to="/movie">{title}</Link>
</h2>
<p>{summary}</p>
<ul>
{genres.map((g) => (
<li key={g}>{g}</li>
))}
</ul>
</div>
);
}
이런식으로 title에 Link를 부여해주면 title을 클릭했을 때 새로고침없이 바로 웹페이지를 이동시켜준다.
파일의 경로는 아래와 같다.