1. Router DOM
Router DOM 설치
yarn add react-router-dom
1. 페이지 컴포넌트 작성 -> 다중 페이지
2. Router.js 파일 생성. router를 구성하는 설정 코드 작성
3. App.jsx import
4. 페이지 이동 테스트
import {BrowswerRouter, Route, Routes} from "react-router-dom"
import Home from "../src/components/Home";
const Router = () => {
return (
<BrowswerRouter>
<Routes>
<Route path="/" element={<Home />}></Route>
</Routes>
</BrowswerRouter>
)
}
export default Router;
이렇게 BrrowserRouter, Routes, Route
3가지를 import하고
위의 코드처럼 순서대로 감싸주면 된다.
마지막 Route에서
path는 위에 주소창에 표시될 문자열을 입력,
element에서는 연결될 컴포넌트 파일 태그를 입력해주면 된다.
그리고 App.jsx로 돌아와서
function App() {
return (
<Router></Router>
);
}
아래 코드처럼 라우터 태그를 작성해주면
연결되는 것을 알 수 있다.
2. useNavigate
// src/pages/home.js
import { useNavigate } from "react-router-dom";
const Home = () => {
const navigate = useNavigate();
return (
<button
onClick={() => {
navigate("/works");
}}
>
works로 이동
</button>
);
};
export default Home;
navigate를 변수에 할당한 뒤
아래 HTML 태그에서 onClick을 통해 연결해줄 수 있다.
3. useLocation
// src/pages/works.js
import { useLocation } from "react-router-dom";
const Works = () => {
const location = useLocation();
console.log("location :>> ", location);
return (
<div>
<div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
</div>
);
};
export default Works;
4. Link
HTML의 a태그와 유사한 문법이다.
JSX에서 a태그를 사용해야 한다면,
Link태그를 이용해 구현해야 합니다.
<Link to="/contact">contact 페이지로 이동하기</Link>
'React' 카테고리의 다른 글
[React] 리액트에서 크롤링하기 (0) | 2023.11.22 |
---|---|
[React] 리액트 Axios 사용법 (0) | 2023.11.21 |
Module not found: Error: Can't resolve 오류 해결하기 (1) | 2023.11.14 |
[React] Redux 설치, 사용법 (0) | 2023.11.10 |
[React] Hooks (useState, useEffect, useRef, uesContext, uesMemo) (2) | 2023.11.09 |