[React] Nested Routes : Route안에 Route, Outlet

🎤 /path 안에 또 다른 path를 만들고 싶을 경우에 사용

Route안에 Route를 만들자

<Route path="/about" element={<About/>}>    -> /about
    <Route path="**member**" element={<Member/>}/>     -> /about/member
    <Route path="**location**" element={<Location/>}/>     -> /about/location
</Route>

→ /about/member 접속시 & 둘 다 보임

→ Route 안에 Route가 오도록 할 때, path에 / 넣으면 안됨!!!

Nested Routes 사용방법

1. 부모 컴포넌트를 작성( 이 때, 자식 컴포넌트가 나올 곳에 을 꼭 작성!!

function Event() {
  return (
    <div>
      <h4>오늘의 이벤트</h4>
      **<Outlet/>**
    </div>
  )
}

1. 부모 Route를 작성

<Route path="/event" element={<Event/>}>

</Route>

1. Nested Route를 사용할 자식 Route를 작성

<Route path="/event" element={<Event/>}>
	 <Route path="one" element={<div>첫 주문시 양배추즙 서비스</div>} />
   <Route path="two" element={<div>생일기념 쿠폰받기</div>} />
</Route>

Nested Routes 장점

장점 1. route 작성이 약간 간단해짐

장점 2. nested route 접속시엔 element 2개나 보임(부모, 자식 컴포넌트)

→ 내부 어디에 보여줄지 정하려면 을 써야 둘 다 보임

function About() {
  return (
    <div>
      <h4>회사정보임</h4>
      **<Outlet></Outlet> -> 여기에 자식 컴포넌트가 보임**
    </div>
  )
}

→ nested routes의 element보여주는 곳은

장점 3. 이런식으로 UI 만들면 뒤로가기 버튼 이용 가능

장점 4. 페이지 이동이 쉬움(UI 스위치 조작이 쉬움)

ex) 부모컴포넌트내용이 먼저 나오고 그 다음에 자식 컴포넌트 내용이 보임

function About() {
  return (
    <div>
      <h4>회사정보임</h4>
      **<Outlet></Outlet> -> 여기에 자식 컴포넌트가 보임**
    </div>
  )
}

ex) 자식컴포넌트내용이 먼저 나오고 그 다음에 부모 컴포넌트 내용이 보임

function About() {
  return (
    <div>
			**<Outlet></Outlet> -> 여기에 자식 컴포넌트가 보임**
      <h4>회사정보임</h4>
    </div>
  )
}

Q. Nested routes 언제씀?

여러 유사한 페이지 필요할 때(글자 하나, 박스 하나만 바뀌어야 할 때)

숙제

1. Route 만들기

<Route path="/event" element={<Event/>}>
          <Route path="one" element={<div>첫 주문시 양배추즙 서비스</div>}/>
          <Route path="two" element={<div>생일기념 쿠폰받기</div>}/>
</Route>

1. Component만들고, 자식 컴포넌트가 들어갈 자리에

function Event() {
  return (
    <div>
      <h4>오늘의 이벤트</h4>
      <Outlet></Outlet>
    </div>
  )
}

전체코드

import './App.css';
import {Button, Navbar, Container, Nav} from 'react-bootstrap';
import data from './data';
import { useState } from 'react';
import {Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom';
import Detail from './Detail.js';

function App() {

  let [shoes] = useState(data);
  let navigate = useNavigate();

  return (
    <div className="App">
      <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={()=>{ navigate('/') }}>Home</Nav.Link>
            <Nav.Link onClick={()=>{ navigate('/detail') }}>Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <Routes>
        <Route path="/" element={
                  <>
                  <div className="main-bg"></div>
                  <div className="container">
                    <div className="row">
          
                      {
                        shoes.map((a,i)=>{
                          return (
                            <Card shoes={shoes[i]} i={i}></Card>
                          )
                        })
                      }
                    </div>
                  </div>
                  </>
        }/>
        <Route path="/detail" element={<Detail/>}/>
        <Route path="/about" element={<About/>}>
          <Route path="member" element={<div>member</div>} />
          <Route path="location" element={<div>location</div>} />
        </Route>
        <Route path="/event" element={<Event/>}>
          <Route path="one" element={<div>첫 주문시 양배추즙 서비스</div>}/>
          <Route path="two" element={<div>생일기념 쿠폰받기</div>}/>
        </Route>
        <Route path="*" element={<div>404페이지입니다.</div>}></Route>
      </Routes>

    </div>
  );
}

function Card(props) {
  return (
          <div className="col-md-4">
            <img src={'https://codingapple1.github.io/shop/shoes' + (props.i+1) +'.jpg'} width="80%"/>
            <h4>{props.shoes.title}</h4>
            <p>{props.shoes.price}</p>
          </div>
  )
}

function About(){
  return (
    <div>
      <h4>office detail</h4>
      <Outlet></Outlet>
    </div>
  )
}

function Event() {
  return (
    <div>
      <h4>오늘의 이벤트</h4>
      <Outlet></Outlet>
    </div>
  )
}
export default App;