[React] 페이지의 URL을 설정하기: Route를 사용
2022. 8. 9. 01:48ㆍFront-end/React.js
반응형
Route
- URL에 해당하는 컴포넌트를 연결해줍니다.
- SPA 방식으로, 하나의 페이지 안에서 필요한 부분만 업데이트합니다.
Route 사용방법
0. 터미널을 켜고 npm install react-router-dom 을 실행하여 설치합니다.
1. 가장 바깥을 <BrowserRouter>로 감쌉니다.
2. 내부를 <Routes>로 감쌉니다.
3. <Routes> 내부에 여러 <Route>들을 삽입합니다.
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Body />}></Route>
<Route path="/result" element={<Result />}></Route>
</Routes>
</BrowserRouter>
);
}
export default App;localhost:3000/ 에 접속한다면 <Body /> 컴포넌트를 보여줍니다.
localhost:3000/result에 접속한다면 <Result /> 컴포넌트를 보여줍니다.
Link
- 해당 URL로 페이지를 이동시킵니다. HTML의 <a>와 유사합니다.
Link 사용방법
import { Link } from "react-router-dom";
...
<Link to="/result">Result</Link>Result를 누르면 localhost:3000/result로 이동하게 됩니다.
반응형
'Front-end > React.js' 카테고리의 다른 글
| [React] Node.js와 연동하기: 값 주고 받기 (0) | 2022.08.15 |
|---|---|
| [React] 페이지를 이동하면서 값 전달하기: useNavigate()와 useLocation() (0) | 2022.08.10 |
| [React] 카드 여러장 한번에 생성하기: Key, Value를 사용 (0) | 2022.08.04 |
| [React] className이 겹칠 때: CSS Module로 해결하기 (0) | 2022.07.28 |
| [React] 컴포넌트(Component)에 대해 알아보기 (0) | 2022.07.22 |