이전 코드에서 이어서 작성

• 누르는 것의 하위 페이지로 가고 싶다
• http://localhost:3000/works/1

---

🧡 path 설정

📁 shared / Router.js

import {BrowserRouter, Route, Routes} from "react-router-dom"
import Home from "../pages/Home"
import About from "../pages/About"
import Contact from "../pages/Contact"
import Works from "../pages/Works"
import Work from "../pages/Work"

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/works" element={<Works />} />
        <Route path="/works/:id" element={<Work />} />
      </Routes>
    </BrowserRouter>
  )
}

export default Router

• <Route path="/works/:id" element={<Work />} />
  • 주소창에 orks/ 뒤에 아무거나 입력하면 Work로 이동한다.
  • 어떤 파라미터로 들어왔는지 확인 필요
  • useParams 사용

🧡 파라미터 확인

📁 pages / Work.jsx

import React from 'react'
import { useParams } from 'react-router-dom'

function Work() {

  const params = useParams()
  console.log(params)

  return (
    <div>하위페이지입니다.</div>
  )
}

export default Work

📁 pages / Works.jsx

import React from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'

const data = [
  {
    id: 1,
    todo: '리엑트 배우기'
  },
  {
    id: 2,
    todo: '리엑트 배우기'
  },
  {
    id: 3,
    todo: '리엑트 배우기'
  },
  {
    id: 4,
    todo: '리엑트 배우기'
  },
  {
    id: 5,
    todo: '리엑트 배우기'
  },
  {
    id: 6,
    todo: '리엑트 배우기'
  }
]

function Works() {

  const location = useLocation()

  return (
    <div>
      <h3>할일목록</h3>
      {data.map(item => {
        return <div key={item.id}>
          {item.id}
          &nbsp;&nbsp;
          <Link to="/works/1">{item.todo}</Link>
        </div>
      })}
    </div>
  )
}

export default Works

🧡 동적 이동

📁 pages / Works.jsx

// 기존 코드
<Link to="/works/1">{item.todo}</Link>

// 수정 코드
<Link to={`/works/${item.id}`}>{item.todo}</Link>

🧡 data 파일로 꺼내기

📁 shared / data.js

export const data = [
  {
    id: 1,
    todo: '리엑트 배우기'
  },
  {
    id: 2,
    todo: '라우트 배우기'
  },
  {
    id: 3,
    todo: '맘마미아 배우기'
  },
  {
    id: 4,
    todo: '룰루랄라 배우기'
  },
  {
    id: 5,
    todo: '호롤롤로 배우기'
  },
  {
    id: 6,
    todo: 'css 배우기'
  }
]

📁 pages / Works.jsx 임포트 추가
📁 pages / Work.jsx 임포트 추가

import { data } from '../shared/data'

🧡 필요한 데이터 가져오기

📁 pages / Work.jsx 임포트 추가

import React from 'react'
import { useParams } from 'react-router-dom'
import { data } from '../shared/data'

function Work() {

  const params = useParams()
  
  //어떤 todo인지 찾아보기
  const foundData = data.find((item) => {
    // find : 조건을 return에 넣으면 맞는 것만 return 해준다.
    return item.id === parseInt(params.id) // == 동등 연산자 === 일치 연산자
  })

  console.log(foundData)

  return (
    <div>
      <h3>할 일 : {foundData.todo}</h3>
    </div>
  )
}

export default Work