[리액트] 외부 파일 컴포넌트 넣기 / useNavigate() / nested routes / Outlet

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에서 저 함수를 갖다 쓰기위해

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
- 서브 경로 생성
- 마인드맵 같은 구조
- 세부적 분류

예시로 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> 지정해주지 않으면

회사 정보임 만 남게 된다.