detail 접속시 보여주고 싶은 html 보여주기
- 다른파일로 뺀 다음 거기서 컴포넌트를 만들어서 넣기.
{/* 디테일 페이지 */}
<Route path="/detail" element={<div>상세페이지임</div>} />
저기 element 속성 부분에 컴포넌트 예정.
= element 속성 부분
= element={ <보여줄html> }
컴포넌트 생성
- 함수 쓰고 return 문 써주기.
///detail 접속시 html 이쁜거 보여달라
function Detail() {
return (
<div className="container">
<div className="row">
<div className="col-md-6">
<img
src="https://codingapple1.github.io/shop/shoes1.jpg"
width="100%"
/>
</div>
<div className="col-md-6">
<h4 className="pt-5">상품명</h4>
<p>상품설명</p>
<p>120000원</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
);
}
export default Detail;
- Detail.js 파일 src 폴더 안에 생성.
- 컴포넌트 생성위해 함수 Detail 짜주고 return () 생성
- 소괄호 안에 보여주고 싶은 html 넣기
- 마지막에는 export default Detail; 생성해서 외부 파일로 사용할 준비완료.
App.js에서 저 함수를 갖다 쓰기 = import 하기
import Detail from "./Detail";
App.js에서 저 함수를 갖다 쓰기위해
export 해준거
import 해주기.
<Route path="/detail" element={<Detail />} />
element 속성에 컴포넌트 담아주기.
useNavigate()의 사용
- 페이지 이동 기능
- Link 대신 사용
페이지 이동 버튼 비교 - Link
{/* 페이지 이동 버튼 */}
<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>
useNavigate() 의 사용 - import 하기.
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
사용하려면 Link 사용했던 것 처럼
import 해줘야 한다.
useNavigate() 를 변수에 담기
let navigate = useNavigate();
useNavigate() 여기 안에는 함수 (페이지 이동을 도와주는) 가 있음.
변수(navigate)에 담아 사용하는게 일반적이다.
onClick() 속성 생성해주기.
<Nav.Link href="#home">Home</Nav.Link>
href 지워주고
<Nav.Link onClick={() => {}}>Home</Nav.Link>
onClick 속성 넣어준다.
navigate 변수 갖다 쓰기
버튼을 눌렀을 때
페이지 이동이 되게 하려면
let navigate = useNavigate();
아까 만든 이 변수 갖다 쓰기.
onClick={() => {
navigate("/detail");
}}
이렇게 버튼 클릭 시
useNavigate() 함수를 사용하면서
소괄호 안에 경로(주소)를 입력해준다.
<Nav.Link
onClick={() => {
navigate("/detail");
}}
>
Cart
</Nav.Link>
navigate(1) / navigate(-1)
navigate(1)
= 앞으로 한 페이지 이동
navigate(-1)
= 뒤로 한페이지 이동
nested routes - Outlet 알아보기
- 서브 경로 생성
- 마인드맵 같은 구조
- 세부적 분류
예시로 about 이라는 페이지 생성
- 정보 갖고오는 페이지
<Route path="/about" element={<div>어바웃페이지임</div>} />
컴포넌트 생성해서 element 속성에 집어넣기.
// About (정보 갖고오는 페이지) 컴포넌트 생성
function About() {
return (
<div>
<h4>회사 정보임</h4>
</div>
);
}
이렇게 생성한 다음에
<Route path="/about" element={<About />} />
element 속성에 생성한 About 컴포넌트 넣음.
정보 갖고오는 페이지에서
더 세부적으로 분류하고 싶은 경우
= nested routes 사용
1) 라우터들 더 여러 개 작성해줘도 됨.
그러나 더 한 번에 식별할 수 있는 방법
= nested routes 사용
2) nested routes
<Route path="/about" element={<About />}
/>
이렇게 띄워 놓은 다음에,
<Route path="/about" element={<About />}>
<Route path="/about/member" element={<About />}
<Route path="/about/location" element={<About />}
</Route>
저 공간에 세부적으로 분류 할 라우터들을 추가해준다.
그리고 /about을 지워준다.
<Route path="/about" element={<About />}>
<Route path="member" element={<About />} />
<Route path="location" element={<About />} />
</Route>
Outlet 의 사용
- nested routes 와 같이 사용
- nested routes 의 element 보여주는 곳 지정하는 역할
<Route path="/about" element={<About />}>
<Route path="member" element={<div>멤버 세부 페이지</div>} />
<Route path="location" element={<About />} />
</Route>
이렇게 코드를 짜게 된 경우,
nested routes 와 같이 사용해서
nested routes 특성 상,
/about/member 접속 시
About 컴포넌트와 멤버 세부 페이지가 같이 보여지게 되는데,
Outlet을 통해 어디로 보여지게 할 지 지정해야 한다.
Outlet 지정하는 방법
- 컴포넌트 짰던 함수로 가기
function About() {
return (
<div>
<h4>회사 정보임</h4>
<Outlet></Outlet>
</div>
);
}
h4 태그 하단에 Outlet 추가해줬음.
h4 태그 하단에
Outlet 지정한 곳에 맞춰
div 태그가 나타나지는 것 확인 가능.
만일, <Outlet> 지정해주지 않으면
회사 정보임 만 남게 된다.
'> 메모 > React' 카테고리의 다른 글
[리액트] Lifecycle / useEffect(훅) / clean up function (0) | 2024.05.27 |
---|---|
[리액트] 외부 페이지 데이터바인딩 / URL 파라미터 문법 / useParams() (0) | 2024.05.27 |
[리액트] Mount 하고 Update 차이 비교 (0) | 2024.05.21 |
[리액트] - 라우터 설치와 사용 (0) | 2024.05.19 |
[리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용 (1) | 2024.05.19 |